D3树/节点

Question

我的工作在此刻D3项目，我试图绘制出的层次化树向人们展示他们是谁负责之间的层次化的相关数据。基本上我可以使用用户A和用户B，他们可以分别负责同一个人。

目前突出此次在建立我重复数据可视化JSON我的数据，有没有去不重复的数据，并使用相同的数据点时，2个或更多的人有责任为同一人？

这是我的jsfiddle例如

My Hierachical Visualisation

您将在这里看到的是，雷蒙德Reddington主&唐纳德·雷斯勒有一些自己的responsibilites之间的跨越，我是在重复这似乎效率不高的数据，有没有更好的方法，这里是我的JSON。

[ 
{ 
    "name" : "Company Name", 
    "parent" : null, 
    "children": [ 
     { 
      "name" : "Raymond Reddington", 
      "parent" : "Cherry Tree Lodge", 
      "children" : [ 
       { 
        "name" : "Debe Zuma", 
        "parent" : "Raymond Reddington", 
       }, 
       { 
        "name" : "Tom Keen", 
        "parent" : "Raymond Reddington", 
       }, 
       { 
        "name" : "Aram Mojtabai", 
        "parent" : "Raymond Reddington", 
       } 
      ] 
     }, 
     { 
      "name" : "Elizabeth Keen", 
      "parent" : "Cherry Tree Lodge", 
      "children" : [ 
       { 
        "name" : "Samar Navabi", 
        "parent" : "Elizabeth Keen", 
       }, 
       { 
        "name" : "Meera Malik", 
        "parent" : "Elizabeth Keen", 
       }, 
       { 
        "name" : "Mr. Kaplan", 
        "parent" : "Elizabeth Keen", 
       }, 
       { 
        "name" : "Reven Wright", 
        "parent" : "Elizabeth Keen", 
       } 
      ] 
     }, 
     { 
      "name" : "Donald Ressler", 
      "parent" : "Cherry Tree Lodge", 
      "children" : [ 
       { 
        "name" : "Matius Solomon", 
        "parent" : "Donald Ressler", 
        "size" : 3938 
       }, 
       { 
        "name" : "Peter Kotsiopulos", 
        "parent" : "Donal Ressler", 
        "size" : 3938 
       }, 
       { 
        "name" : "Tom Keen", 
        "parent" : "Raymond Reddington", 
        "size" : 3938 
       }, 
       { 
        "name" : "Aram Mojtabai", 
        "parent" : "Raymond Reddington", 
        "size" : 3938 
       } 
      ] 
     }, 
     { 
      "name" : "Harold Cooper", 
      "parent" : "Cherry Tree Lodge", 
      "children" : [ 
       { 
        "name" : "Samar Navabi", 
        "parent" : "Elizabeth Keen", 
        "size" : 3938 
       }, 
       { 
        "name" : "Meera Malik", 
        "parent" : "Elizabeth Keen", 
        "size" : 3938 
       } 
      ] 
     } 
    ] 
} 

]

Answer 1

这个网站详细介绍扁平数据转换成由D3 http://www.d3noob.org/2014/01/tree-diagrams-in-d3js_11.html

所需的分层数据，他们解释这也很好的方法。正如笔者注意到它最初是基于https://stackoverflow.com/a/17849353/1544886

我已经复制并粘贴低于其网站的例子：

var data = [ 
    { "name" : "Level 2: A", "parent":"Top Level" }, 
    { "name" : "Top Level", "parent":"null" }, 
    { "name" : "Son of A", "parent":"Level 2: A" }, 
    { "name" : "Daughter of A", "parent":"Level 2: A" }, 
    { "name" : "Level 2: B", "parent":"Top Level" } 
    ]; 

将映射到：

var treeData = [ 
    { 
    "name": "Top Level", 
    "parent": "null", 
    "children": [ 
     { 
     "name": "Level 2: A", 
     "parent": "Top Level", 
     "children": [ 
      { 
      "name": "Son of A", 
      "parent": "Level 2: A" 
      }, 
      { 
      "name": "Daughter of A", 
      "parent": "Level 2: A" 
      } 
     ] 
     }, 
     { 
     "name": "Level 2: B", 
     "parent": "Top Level" 
     } 
    ] 
    } 
]; 

通过：

var dataMap = data.reduce(function(map, node) { 
map[node.name] = node; 
return map; 
}, {}); 

var treeData = []; 
data.forEach(function(node) { 
// add to parent 
var parent = dataMap[node.parent]; 
if (parent) { 
    // create child array if it doesn't exist 
    (parent.children || (parent.children = [])) 
    // add node to child array 
    .push(node); 
} else { 
    // parent is null or missing 
    treeData.push(node); 
} 
}); 

您可以扩展进一步用Ids替换，并使用第二个规范化数组替代lo okup：

[{ 
    "id": 0, 
    "name": "Cherry Tree Lodge" 
},{ 
    "id": 1, 
    "name": "Tom Keen" 
},{ 
    "id": 2, 
    "name": "Debe Zuma" 
}] 

另外请注意，你的json数据不是严格有效的，你有额外的逗号。