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();