CODEWITHSUNDEEP
d3.js
Dharminder Dhanda
Dharminder Dhanda

Reputation: 11

d3 v4 Hierarchical Edge Bundling

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.

Upvotes: 1

Views: 2751

Answers (1)

Monoceros
Monoceros

Reputation: 31

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

Upvotes: 3

Related Questions