pixeline
pixeline

Reputation: 17984

d3.js how to properly massage my data for tree layout?

I'm having a hard time finding the right way to properly structure my json data to achieve what I need with d3.js.

My content is made of "articles", which have "tags" in a many-to-many relationship. Therefore, an article can have several tags, a tag can have several articles.

I want to represent my content as a node tree, in such way:

The intended visualisation

But right now, tags and posts are reproduced several times, as such:

the unintended visualisation

How can I avoid the tag & posts duplication, and instead have lines pointing to the correct nodes? Or is there a better way to format my json data to achieve this sort of visualisation?

You can see my code in action at this fiddle. Here is the data:

var json_data= {
    "name": "Histoire du Web",
    "children": [
        {
            "name": "américain",
            "type": "tag",
            "count": "1",
            "children": [
                {
                    "name": "jeff atwood",
                    "type": "article",
                    "count": 7
                }
            ]
        },
        {
            "name": "american",
            "type": "tag",
            "count": "2",
            "children": [
                {
                    "name": "Doug Englebart",
                    "type": "article",
                    "count": 5
                },
                {
                    "name": "jeff atwood",
                    "type": "article",
                    "count": 7
                }
            ]
        },
        {
            "name": "coding horror",
            "type": "tag",
            "count": "1",
            "children": []
        },
        {
            "name": "développeur",
            "type": "tag",
            "count": "1",
            "children": [
                {
                    "name": "jeff atwood",
                    "type": "article",
                    "count": 7
                }
            ]
        },
        {
            "name": "Engelbart's Law",
            "type": "tag",
            "count": "1",
            "children": []
        },
        {
            "name": "entrepreneur",
            "type": "tag",
            "count": "1",
            "children": [
                {
                    "name": "jeff atwood",
                    "type": "article",
                    "count": 7
                }
            ]
        },
        {
            "name": "forum",
            "type": "tag",
            "count": "1",
            "children": [
                {
                    "name": "jeff atwood",
                    "type": "article",
                    "count": 7
                }
            ]
        },
        {
            "name": "hypertext",
            "type": "tag",
            "count": "1",
            "children": [
                {
                    "name": "Doug Englebart",
                    "type": "article",
                    "count": 5
                }
            ]
        },
        {
            "name": "interaction",
            "type": "tag",
            "count": "1",
            "children": [
                {
                    "name": "Doug Englebart",
                    "type": "article",
                    "count": 5
                }
            ]
        },
        {
            "name": "mouse",
            "type": "tag",
            "count": "1",
            "children": [
                {
                    "name": "Doug Englebart",
                    "type": "article",
                    "count": 5
                }
            ]
        },
        {
            "name": "stackoverflow",
            "type": "tag",
            "count": "1",
            "children": [
                {
                    "name": "jeff atwood",
                    "type": "article",
                    "count": 7
                }
            ]
        }
    ]
};

Upvotes: 1

Views: 189

Answers (1)

Drew Faubion
Drew Faubion

Reputation: 461

It is not easy to use a tree layout to represent data where nodes share parents, however it is possible and a detailed description can be found here: https://gist.github.com/GerHobbelt/3683278

From the link:

Of course, some brutal hacking, e.g. duplication of partial trees to convert multi-parent to many times the same with single parent, can be applied, but it might be a much better option to use a true graph layout mechanism, such as d3.layout.force, and apply the proper constraints to make it do what you want.

Upvotes: 1

Related Questions