d3 v4分層邊緣綁定

Question

我正在嘗試將我的分層邊緣綁定圖表移至d3v4。

但找不到d3.layout.bundle（）的替代方法。

D3V3例子是https://bl.ocks.org/mbostock/7607999

與d3v4任何示例？請幫忙。

Answer 1

您需要兩件事：層次結構和層次結構中節點之間的鏈接數組。

您可以從JSON中加載層次結構或使用d3.stratify從CSV中創建一個層次結構。然後將層次結構傳遞給d3.hierarchy。見the d3-hierarchy documentation。你需要構建一個鏈接數組。每個鏈接都是具有source和target的對象，每個鏈接指向層次結構中的一個節點。

您可以使用node.path（取代d3.layout.bundle）和d3.curveBundle的組合計算並繪製包。見the d3.curveBundle documentation。

如果links是你的鏈接陣列，代碼看起來是這樣的：

const line = d3.line() 
    .x(d => d.data.x) 
    .y(d => d.data.y) 
    .curve(d3.curveBundle.beta(0.95)); 

const edges = g.selectAll('.link').data(links); 

edges.enter().append('path') 
    .attr('class', 'link') 
.merge(edges) 
    .attr('d', d => line(d.source.path(d.target))); 

edges.exit().remove();