如何在D3中組織節點位置Force佈局

我有一個圖表，可能有1000個節點具有非常嵌套的結構，所以當我單擊一個節點時，它會添加更多的子節點，等等。有些孩子可以有多個父母，有些孩子可以有不同父母的兄弟姐妹。我已經把一個簡單的fiddle放在一起來演示我到目前爲止的樣子，爲了簡潔起見，只有兩個級別的數據。如何在D3中組織節點位置Force佈局

這是我的仿真設置...

var simulation = d3.forceSimulation(mergedData.nodes) 
    .velocityDecay(0.55) 
    .force('charge', d3.forceManyBody().strength(-100).distanceMin(10000)) 
    .force('collide', d3.forceCollide(25)) 
    .force('link', d3.forceLink(mergedData.links) 
    .id((d) => { return d.id; }) 
    .distance(400) 
    .strength(0.1) 
) 
    .force('y', d3.forceY(height/2)) 
    .force('x', d3.forceX(width/2)) 
    .on('tick', ticked);

我試圖安排節點的佈局，使父>孩子的關係更加清晰。理想情況下，我想給用戶兩個選擇，一個樹狀結構，和徑向/分組結構如下所示：

我真的很掙扎，看我怎麼去這樣做，所以任何幫助將不勝感激。

謝謝！

P.S.我使用的是V4 API

來源

2017-05-08 DanV

您可以組織節點作爲使用d3.forceY左圖像，這在：

沿着創建對於給定位置y，y軸新的定位力。
.force("yPosition", d3.forceY(function(d){ 
    return d.r === 20 ? 100 : 300 
}).strength(2)) 
進出口使用比推薦一個strength更高（：

因此，使用您的代碼，則可以例如位置100在垂直方向的紅色圓圈和灰色圓圈在300與座標在0和1之間）只是爲了使圓圈在y位置更好地對齊。

這是你更新的提琴：https://jsfiddle.net/rLf054zy/

PS：我改變了你mergedData陣列，這是不正確的合併d1和d2。

來源

2017-05-09 01:19:38

謝謝！一旦你點擊了一個紅色圓圈，數據就會合並，但是你的更新會使它更加明顯。也感謝您的答案。我在tick函數中一直搞亂節點'cx'和'cy'屬性，沒有太多的運氣。 – DanV

@DanV對不起，我錯過了那個事件處理程序。關於'cx'和'cy'屬性，你可以將'd3.forceX/Y'與scale結合起來。例如，這是一個強制導向的圖表，我將它們組合在一起：https：//gf.neocities.org/ohp/ohp.html –

再次感謝@Gerardo！這真的很有幫助。我會給你的答案一個綠色的勾號，但我想先得到更多的答案，並希望得到一些洞察其他佈局。 – DanV

如何在D3中組織節點位置Force佈局

回答

相關問題