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數據不是嚴格有效的，你有額外的逗號。