D3.js d3 v4分层边缘绑定

D3.js d3 v4分层边缘绑定,d3.js,D3.js,我正在尝试将我的分层边缘绑定图表移动到d3v4 但找不到d3.layout.bundle()的替代品 d3v3示例是 有d3v4的例子吗?请提供帮助。您需要两样东西:层次结构和层次结构中节点之间的链接数组 您可以使用d3.stratify从JSON加载层次结构或从CSV创建层次结构。然后将层次结构传递到d3.hierarchy。看 然后需要构造一个链接数组。每个链接都是一个对象,具有源和目标,每个链接都指向层次结构中的一个节点 您可以使用node.path(替换d3.layout.bundle)

我正在尝试将我的分层边缘绑定图表移动到d3v4

但找不到d3.layout.bundle()的替代品

d3v3示例是


有d3v4的例子吗?请提供帮助。

您需要两样东西:层次结构和层次结构中节点之间的链接数组

您可以使用
d3.stratify
从JSON加载层次结构或从CSV创建层次结构。然后将层次结构传递到
d3.hierarchy
。看

然后需要构造一个链接数组。每个链接都是一个对象,具有
目标
,每个链接都指向层次结构中的一个节点

您可以使用
node.path
(替换
d3.layout.bundle
)和
d3.curveBundle
的组合来计算和绘制捆绑包。看

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

问了一个类似的问题,并在此处提供了完整答案: