d3 v4 分层边缘捆绑

Question

我正在尝试将我的 Hierarchical Edge Bundling 图移动到 d3v4。

但找不到 d3.layout.bundle() 的替代方法。

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

有 d3v4 的例子吗？请帮忙。

Answer 1

您需要两件事：层次结构和层次结构中节点之间的链接数组。

您可以使用 d3.stratify 从 JSON 加载层次结构或从 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();