使用Angular实现D3图表(sankey)

Question

尝试在Angular的最新版本中实现D3图表(sankey)。我遵循了这个要点，但我得到的只是纯文本中的节点，而不是图形。

我做了一个最小安装的plunker来复制问题

短篇小说，

我导入我的组件上的库：

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

在ngOnInit:上调用DrawChart()

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元素，它应该可以工作了。