Реализуйте диаграмму D3 (sankey) с помощью Angular

Попытка внедрить диаграмму D3 (sankey) в последнюю версию Angular. Я следовал этому gist, но единственное, что я получаю, это узлы в виде простого текста вместо график.

Я сделал плункер с минимальной установкой, чтобы воспроизвести проблему.

Короткий рассказ,

Я импортирую библиотеки в свой компонент:

import * as d3 from 'd3';
import * as d3Sankey from 'd3-sankey';

Позвонил DrawChart() в ngOnInit:

ngOnInit() {
      this.DrawChart();
}

Реализуйте функцию DrawChart():

private DrawChart() {

            var svg = d3.select("#sankey"),
                width = +svg.attr("width"),
                height = +svg.attr("height");

            var formatNumber = d3.format(",.0f"),
                format = function (d: any) { return formatNumber(d) + " TWh"; },
                color = d3.scaleOrdinal(d3.schemeCategory10);

            var sankey = d3Sankey.sankey()
                .nodeWidth(15)
                .nodePadding(10)
                .extent([[1, 1], [width - 1, height - 6]]);

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

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

            d3.json("../../../assets/vendors/uk2015.json", function (error, energy: any) {
                if (error) throw error;

                sankey(energy);

                link = link
                    .data(energy.links)
                    .enter().append("path")
                    .attr("d", d3Sankey.sankeyLinkHorizontal())
                    .attr("stroke-width", function (d: any) { return Math.max(1, d.width); });

                link.append("title")
                    .text(function (d: any) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); });

                node = node
                    .data(energy.nodes)
                    .enter().append("g");

                node.append("rect")
                    .attr("x", function (d: any) { return d.x0; })
                    .attr("y", function (d: any) { return d.y0; })
                    .attr("height", function (d: any) { return d.y1 - d.y0; })
                    .attr("width", function (d: any) { return d.x1 - d.x0; })
                    .attr("fill", function (d: any) { return color(d.name.replace(/ .*/, "")); })
                    .attr("stroke", "#000");

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

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

    }

Нет ошибки на консоли или чего-то, что укажет мне правильное направление.

Изменить: я попытался скопировать и вставить код SVG из инспектора кода в Chrome и отобразить его в онлайн-средстве просмотра SVG, и он работает. Кажется, что Angular не может отображать SVG, который он создает. Но как я могу это исправить?


svg angular d3.js sankey-diagram
person Tasos    schedule 06.11.2017    source источник
comment
Привет, я борюсь с той же проблемой, а именно с тем, как встроить график D3 в Angular 6. Я получил рабочую (локальную) версию графика D3 в виде HTML-файла и TSV-ввода, но как правильно внедрить его в Angular? Вы решили свою проблему?   -  person B--rian    schedule 23.08.2018
comment
@B--rian, к сожалению, я не решил это   -  person Tasos    schedule 24.08.2018

Ответы (1)


arrow_upward
1
arrow_downward

Код мне тоже не подошел. Он не отображался, потому что он не был установлен как элемент svg.

Заменять

var svg = d3.select("#sankey")

с

var svg = d3.select('#sankey')
    .append('svg')
    .attr('width', 1000)
    .attr('height', 500);

Ваш DOM теперь покажет элемент svg, и он должен работать.

person mmai    schedule 13.06.2019