Reputation: 17984
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:
But right now, tags and posts are reproduced several times, as such:
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
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