Question

我目前正在使用d3-sankey插件构建分层数据集的sankey图。但是，当使用大小适中的数据集时，我的页面会冻结然后被迫在Chrome中被杀死。我无法检查/打开调试工具，最终必须杀死页面。但是，对于非常小的数据集，包括我基于我的代码https://bost.ocks.org/mike/sankey/的此页面中的示例数据集，一切都很好。

这是我目前的代码：

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

这是我想要绘制的数据集的链接：https://jsonblob.com/ea145a7d-5b9f-11e8-9b45-3173ae38c5d1

奇怪的是，我使用的数据集的节点数少于示例数据集。我也使用http-server模块来托管页面，这可能是也可能不是瓶颈。

我原本以为这是宽度/高度问题，所以我现在将宽度和高度设置为任意大的值，每个3000。

我是D3的新手，所以任何指导都会非常感激！

Answer 1

如果你看一下你提供的数据集，就会有周期。基本上，在sankey图中，您不能拥有A-> B，B-> A关系。

d3 sankey图表没有渲染

1 个答案: