Angular 使用角度传感器实现D3图表（sankey）

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

我做了一个实验来复制这个问题

短篇小说

我导入组件上的库：

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

    }

private DrawChart（）{
var svg=d3.选择（“#sankey”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
var formatNumber=d3.format（“，.0f”），
format=函数（d:any）{返回formatNumber（d）+“TWh”；}，
颜色=d3.scaleOrdinal（d3.SchemeCategory 10）；
var sankey=d3Sankey.sankey（）
.诺德维特（15）
.nodePadding（10）
.范围（[[1,1]，[width-1，height-6]）；
var link=svg.append（“g”）
.attr（“类”、“链接”）
.attr（“填充”、“无”）
.attr（“笔划”，“千”）
.attr（“笔划不透明度”，0.2）
。选择全部（“路径”）；
var node=svg.append（“g”）
.attr（“类”、“节点”）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，10）
.选择全部（“g”）；
d3.json（“../../../assets/vendors/uk2015.json”），函数（错误，能量：任意）{
如果（错误）抛出错误；
桑基（能源）；
链接=链接
.数据（能源.链接）
.enter（）.append（“路径”）
.attr（“d”，d3Sankey.sankeyLinkHorizontal（））
.attr（“笔划宽度”，函数（d:any）{return Math.max（1，d.width）；}）；
链接。附加（“标题”）
.text（函数（d:any）{返回d.source.name+“→ " + d、 target.name+“\n”+格式（d.value）；}）；
节点=节点
.数据（能量.节点）
.enter（）.append（“g”）；
node.append（“rect”）
.attr（“x”，函数（d:any）{return d.x0；}）
.attr（“y”，函数（d:any）{返回d.y0；}）
.attr（“height”，函数（d:any）{返回d.y1-d.y0；}）
.attr（“宽度”，函数（d:any）{返回d.x1-d.x0；}）
.attr（“fill”，函数（d:any）{返回颜色（d.name.replace（/.*/，“”）；}）
.attr（“笔划”和“#000”）；
node.append（“文本”）
.attr（“x”，函数（d:any）{返回d.x0-6；}）
.attr（“y”，函数（d:any）{返回（d.y1+d.y0）/2；}）
.attr（“dy”，“0.35em”）
.attr（“文本锚定”、“结束”）
.text（函数（d:any）{返回d.name；}）
.filter（函数（d:any）{返回d.x0

控制台上没有错误，或者会给我指出正确方向的东西

---

编辑：我试图从Chrome中的代码检查器复制粘贴SVG代码，并将其呈现在在线SVG查看器中。Angular似乎无法呈现它生成的SVG。但如何修复它？

该代码对我也不起作用。它无法呈现，因为它没有设置为SVG元素

替换

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

与

---

您的DOM现在将显示svg元素，它应该可以工作。

Hi，我正在努力解决同样的问题，即如何将D3图形嵌入Angular 6。我得到了一个工作（本地）D3图形的版本为HTML文件和TSV输入，但将其实现为Angular的正确方法是什么？您解决了问题吗？@B--rian遗憾的是，我没有解决问题

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