d3.js如何正确按摩我的数据进行树形布局？

Question

我很难找到正确构建json数据的正确方法，以达到我对d3.js的需求。

我的内容由＆＃34;文章＆＃34;组成，其中包含＆＃34;标签＆＃34;在多对多的关系中。 因此，一篇文章可以有几个标签，一个标签可以有几个文章。

我希望以这种方式将我的内容表示为节点树：

但是现在，标签和帖子被复制了几次，如下：

如何避免使用标签＆amp;发布重复，而是有指向正确节点的行？或者有更好的方法来格式化我的json数据以实现这种可视化吗？

您可以在this fiddle查看我的代码。 这是数据：

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
                }
            ]
        }
    ]
};

Answer 1

使用树形布局来表示节点共享父节点的数据并不容易，但有可能并且可以在此处找到详细说明：https://gist.github.com/GerHobbelt/3683278

从链接：

  

当然，一些残酷的黑客攻击，例如可以应用部分树的重复以将多父单元转换为与单个父单元相同的多次，但是使用真正的图形布局机制（例如d3.layout.force）可能是更好的选择，并应用适当的约束使它做你想做的事。