d3 v4分层边缘捆绑

时间:2016-08-19 04:14:12

标签: d3.js

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

但无法找到d3.layout.bundle()的替代品。

d3v3示例为https://bl.ocks.org/mbostock/7607999

d3v4的任何例子?请帮忙。

1 个答案:

答案 0 :(得分:3)

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

您可以使用d3.stratify从JSON加载层次结构或从CSV创建一个层次结构。然后将层次结构传递给d3.hierarchy。请参阅the d3-hierarchy documentation

然后你需要构建一个链接数组。每个链接都是一个带有sourcetarget的对象,每个对象都指向层次结构中的一个节点。

您可以使用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();