d3 v4分层边缘捆绑 [英] d3 v4 Hierarchical Edge Bundling

问题描述

我正在尝试将层次结构边缘捆绑"图表移至d3v4.

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

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

使用d3v4的任何示例?请帮忙.

解决方案

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

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

然后，您需要构造一个链接数组.每个链接都是具有source和target的对象，每个对象都指向层次结构中的一个节点.

您可以使用node.path(代替d3.layout.bundle)和d3.curveBundle的组合来计算和绘制束.参见 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();

I am trying to move my Hierarchical Edge Bundling chart to d3v4.

but could not find an alternative to d3.layout.bundle().

d3v3 example is https://bl.ocks.org/mbostock/7607999

any example with d3v4? Please help.

解决方案

You'll need two things: the hierarchy and the array of links between nodes in the hierarchy.

You can load a hierarchy from JSON or create one from CSV by using d3.stratify. Then pass the hierarchy to d3.hierarchy. See the d3-hierarchy documentation.

Then you'll need to construct an array of links. Each link is an object with a source and target, each of which points to a node in the hierarchy.

You can calculate and draw the bundles using a combination of node.path (which replaces d3.layout.bundle) and d3.curveBundle. See the d3.curveBundle documentation.

If links is your array of links, the code looks something like this:

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

这篇关于d3 v4分层边缘捆绑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！