D3 дерево/иерархические данные между узлами

Question

Я работаю над проектом d3 на данный момент, и я пытаюсь отобразить иерархическое дерево, чтобы показать людям и за кого они несут ответственность. В основном я могу использовать пользователя A и пользователя B, и каждый из них может отвечать за одного и того же человека.

В настоящее время, чтобы выделить это в моих данных JSON, которые создают визуализацию, я повторяю данные, есть ли возможность не повторять данные и использовать одну и ту же точку данных, когда 2 или более людей несут ответственность за одного и того же человека?

Вот мой JSfiddle пример

My Hierachical Visualisation

Вы увидите здесь, Raymond Реддингтон & Дональд Ressler имеет переправиться между некоторыми из их полномочий, я повторяю данные, которые, кажется, неэффективны, есть лучший способ, вот мой 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); 
} 
}); 

Вы могли бы расширить эту дальнейшую замену идентификаторами и использовать второй нормализованный массив для lo okup:

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

Также обратите внимание, что ваши данные json не являются строго верными, у вас есть дополнительные запятые.