ノード間のD3ツリー/階層関係のデータ

Question

現在、私はd3プロジェクトに取り組んでいます。階層ツリーをマップして、人々とその責任者を表示しようとしています。基本的に私はユーザーAとユーザーBができ、それぞれ同じ人物の責任を負うことができます。

現在、私はデータを繰り返すビジュアライゼーションを構築するJSONデータでこれを強調するには、2人以上の人が同じ人物に責任を負うときにデータを繰り返したり同じデータポイントを使用しないでください。ここで

は私JSfiddle例です

My Hierachical Visualisation

あなたはレイモンドReddington &ドナルドResslerが自分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 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); 
} 
}); 

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

はにマッピングされます

これをさらに拡張して、Idで置き換えて、loに対して2番目の正規化された配列を使用することができますokup：

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

jsonデータは厳密には有効ではありません。余分なカンマがあります。