Question

尝试将D3图表（sankey）实现到最新版本的Angular。我遵循了这个gist，但我唯一得到的是纯文本节点而不是图形。

我制作了plunker with a minimum installation来重现问题

短篇小说，

我在我的组件上导入库：

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

    }

控制台上没有错误或会指向正确方向的东西。

编辑：我尝试从Chrome中的代码检查器复制粘贴SVG代码并在在线SVG查看器中呈现它并且它可以正常工作。似乎Angular无法渲染它产生的SVG。但我该如何解决呢？

Answer 1

该代码也不适用于我。它没有渲染，因为它没有设置为svg元素。

替换

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

使用

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

您的DOM现在将显示svg元素，并且应该可以使用。

使用Angular实现D3图表（sankey）

1 个答案: