使用D3.js的分層力圖

我想使用D3.js生成分層力圖，這是一種力導向圖，允許您通過單擊將圖展開到子級別的節點來導航樹狀結構（顯示兒童之間的關係）。父節點或兄弟節點可以通過兩種方式相互關聯節點。父母關係表示節點「屬於」他們的父母。使用D3.js的分層力圖

作爲一個起點，我已經看過了力集羣的例子：https://github.com/mbostock/d3/blob/master/examples/force/force-cluster.html，並且包含了上面的關係，但我無法弄清楚如何渲染擴展集羣而不是整個網絡（見下圖）。

JSON data: 
{"nodes": 
     [ 
     {"name":"Person 0","group":"Person 0"}, 
     {"name":"Person 1","group":"Person 1"}, 
     {"name":"Person 2","group":"Person 1"}, 
     {"name":"Person 3","group":"Person 1"},  
     {"name":"Person 4","group":"Person 3"}, 
     {"name":"Person 5","group":"Person 3"} 
     ], 
"links": 
     [ 
     {"source":1,"target":0,"type":"sibling"}, 
     {"source":2,"target":1,"type":"parent"}, 
     {"source":3,"target":1,"type":"parent"}, 
     {"source":3,"target":2,"type":"sibling"}, 
     {"source":4,"target":3,"type":"parent"}, 
     {"source":5,"target":3,"type":"parent"}, 
     {"source":4,"target":5,"type":"sibling"} 
     ] 
}

Expanding cluster

上圖：力示意圖，其中紅色鏈接指示兄弟關係。

這也將有可能安排「孩子」作爲JSON的孩子，而不是使用父「類型」：

{ 
"nodes": [ 
    { 
     "name": "Person 0", 
    }, 
    { 
     "name": "Person 1", 
     "children": [ 
      { 
       "name": "Person 2", 
      }, 
      { 
. 
. 
. 
"links": [ 
    { 
     "source": 1, 
     "target": 0 
    }, 
. 
.

但是，你怎麼又結合了樹結構，同時保持跟蹤兒童節點之間的關係？

的想象力樹狀結構將如下所示： Tree

下段表示視覺的期望佈局（類似的功能的一個上的圖像中）。

你有什麼建議如何進行？

來源

2012-10-03 graphmeter

我有類似的問題。我想在一個大數據集點擊的節點周圍顯示本地網絡。我的解決方案可能會爲您提供一些指針：timebandit.github.io/graphSub – timebandit

隱含地說，所有具有相同直接父節點的節點都是兄弟節點。因此，如果節點是彼此的兄弟節點，則不需要另外追蹤。

如果您碰巧有隻與其他兄弟節點相關但沒有父節點的節點（例如您的示例中的Person 0和Person 1之間的關係），樹佈局不是正確的選擇。相反，您可能想嘗試強制佈局。

來源

2014-05-02 12:40:53 Elvis

使用D3.js的分層力圖

回答

相關問題