1
我正在尝试将我的分层边缘绑定图表移至d3v4。d3 v4分层边缘绑定
但找不到d3.layout.bundle()的替代方法。
D3V3例子是https://bl.ocks.org/mbostock/7607999
与d3v4任何示例?请帮忙。
我正在尝试将我的分层边缘绑定图表移至d3v4。d3 v4分层边缘绑定
但找不到d3.layout.bundle()的替代方法。
D3V3例子是https://bl.ocks.org/mbostock/7607999
与d3v4任何示例?请帮忙。
您需要两件事:层次结构和层次结构中节点之间的链接数组。
您可以从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();
问过类似的问题,在这里提供完整的答案:http://stackoverflow.com/questions/42797911/d3-v4 -hierarchical边缘捆扎多端口从-V3 – Brad