d3 sankey chart not rendering

Question

I am currently using the d3-sankey plugin for constructing a sankey diagram of a hierarchical dataset. However, when using datasets with modest size, my page freezes and then is forced to be killed within Chrome. I cannot inspect/open debugger tools, and eventually the page has to be killed. However, with very small datasets, including the example dataset from this page, which I based my code upon, https://bost.ocks.org/mike/sankey/ , everything renders fine.

Here is the current code I have:

renderData(data) {
        var margin = { top: 10, right: 10, bottom: 10, left: 10 },
            width = 1200 - margin.left - margin.right,
            height = 3000 - margin.top - margin.bottom;
        let svg = this.svg;
        this.width = +svg.attr("width"),
            this.height = +svg.attr("height");
        const formatNumber = d3.format(",.0f"),
            format = (d) => { return formatNumber(d) + " Students"; },
            color = d3.scaleOrdinal(d3.schemeCategory10);

        let sankey = d3.sankey()
            .nodeWidth(36)
            .nodePadding(10)
            .size([width, height])
            .nodeId((d) => { return d.name; })
            .extent([[1, 1], [width, height]]);

        let link = this.svg.append("g")
            .attr("class", "links")
            .attr("fill", "none")
            .attr("stroke", "#000")
            .attr("stroke-opacity", 0.2)
            .selectAll("path");

        let node = this.svg.append("g")
            .attr("class", "nodes")
            .attr("font-family", "sans-serif")
            .attr("font-size", 10)
            .selectAll("g");

        sankey(data);

        link = link.data(data.links)
            .enter().append("path")
            .attr("d", d3.sankeyLinkHorizontal())
            .attr("stroke-width", (d) => { return Math.max(1, d.width); })
        link.append("title")
            .text((d) => { return d.source.name + " -> " + d.target.name + "\n" + format(d.value); });
        node = node.data(data.nodes).enter().append("g");
        node.append("rect")
            .attr("x", function (d) { return d.x0; })
            .attr("y", function (d) { return d.y0; })
            .attr("height", function (d) { return d.y1 - d.y0; })
            .attr("width", function (d) { return d.x1 - d.x0; })
            .attr("fill", function (d) { return color(d.name.replace(/ .*/, "")); })
            .attr("stroke", "#000");

        node.append("text")
            .attr("x", function (d) { return d.x0 - 6; })
            .attr("y", function (d) { return (d.y1 + d.y0) / 2; })
            .attr("dy", "0.35em")
            .attr("text-anchor", "end")
            .text(function (d) { return d.name; })
            .filter(function (d) { return d.x0 < this.width / 2; })
            .attr("x", function (d) { return d.x1 + 6; })
            .attr("text-anchor", "start");

        node.append("title")
            .text(function (d) { return d.name + "\n" + format(d.value); });
    }

And here is a link to the dataset that I am trying to diagram: https://jsonblob.com/ea145a7d-5b9f-11e8-9b45-3173ae38c5d1

The strange part is that the dataset I am using has less nodes than the example dataset. I also am using the http-server module to host the page, which may or may not be a bottlneck.

I originally thought this is a width/height issue, so I set the width and height to be some arbitrary large value, 3000 each, for now.

I'm new to D3, so any guidance would be greatly appreciated!

Answer 1

If you take a look at the dataset you provided, there are cycles. Essentially, in a sankey diagram you cannot have an A->B, B->A relationship.