Диаграмма d3 sankey не отображается - PullRequest
Новая
       26

Диаграмма d3 sankey не отображается

0 голосов
/ 19 мая 2018

В настоящее время я использую плагин d3-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, поэтому любые указания будут с благодарностью!

1 Ответ

0 голосов
/ 20 мая 2018

Если вы посмотрите на предоставленный вами набор данных, есть циклы.По сути, на диаграмме Санки вы не можете иметь отношения A-> B, B-> A.

...