CODEWITHSUNDEEP
d3.js
Brad
Brad

Reputation: 715

D3 V4 Hierarchical Edge Bundling port from v3

I'm struggling to port a graph to V4.

here is the one I'm working on: https://bl.ocks.org/mbostock/7607999

I've tried to follow the instructions provided here: d3 v4 Hierarchical Edge Bundling but to no avail.

I've gotten the labels to layout correctly but the edge bundles render incorrectly.

here's what I have: 

var diameter = 960,
    radius = diameter / 2,
    innerRadius = radius - 120;

var cluster = d3.cluster()
    .size([360, innerRadius]);

const line = d3.line()
    .x(d => d.x)
    .y(d => d.y)
    .curve(d3.curveBundle.beta(0.95));

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .append("g")
    .attr("transform", "translate(" + radius + "," + radius + ")");

var link = svg.append("g").selectAll(".link"),
    node = svg.append("g").selectAll(".node");

d3.json("readme-flare-imports.json", function(error, classes) {
    if (error) throw error;

    var wha = packageHierarchy(classes);

    var root = d3.hierarchy(wha, (d) => d.children);

    var links = packageImports(root.descendants());

    console.dir(links);

    cluster(root);

    var nodes = root.descendants();

    var edges = link.data(links);

    node = node
        .data(nodes.filter(function(n) { return !n.children; }))
        .enter().append("text")
        .attr("class", "node")
        .attr("dy", ".31em")
        .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 8) + ",0)" + (d.x < 180 ? "" : "rotate(180)"); })
        .style("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
        .text(function(d) { return d.data.key; })

    edges.enter().append('path')
        .attr('class', 'link')
        .merge(edges)
        .attr('d', d => {
            //console.log(d.source.path(d.target));
            return line(d.source.path(d.target)); });

    edges.exit().remove();

All other code is essentially the same as in the example (I had to add .data in a few places in packageHierarchy and packageImports)

Here is what my result looks like. Help!

Example Output

Upvotes: 2

Views: 874

Answers (1)

Brad
Brad

Reputation: 715

I figured it out!

this line from another answer was slightly misleading:

const line = d3.line()
    .x(d => d.x)
    .y(d => d.y)
    .curve(d3.curveBundle.beta(0.95));

this is what is should be:

const line = d3.radialLine()
    .radius(function(d) { return d.y; })
    .angle(function(d) { return d.x / 180 * Math.PI; })
    .curve(d3.curveBundle.beta(0.95));

Full solution can be found here:

Hierarchical Edge Bundling v4 port

Upvotes: 3

Related Questions