如何在Angular5中使用高度表中的桑基图

npm install d3
npm install d3-sankey

ng generate component Sankey

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

ngOnInit() {
  const svg = d3.select('svg');
  // 设置画布的宽度和高度
  const width = +svg.attr('width');
  const height = +svg.attr('height');
  // 创建一个d3-sankey布局
  const sankey = d3Sankey.sankey()
    .nodeWidth(15)
    .nodePadding(10)
    .size([width, height]);
  // ...
}

d3.json('data.json', (error, data) => {
  if (error) throw error;
  // 将数据传递给d3-sankey布局
  const graph = sankey(data);
  // ...
});

// 绘制链接
const link = svg.append('g')
  .selectAll('.link')
  .data(graph.links)
  .enter()
  .append('path')
  .attr('class', 'link')
  .attr('d', d3Sankey.sankeyLinkHorizontal())
  .style('stroke-width', (d: any) => Math.max(1, d.width));

// 绘制节点
const node = svg.append('g')
  .selectAll('.node')
  .data(graph.nodes)
  .enter()
  .append('g')
  .attr('class', 'node')
  .attr('transform', (d: any) => `translate(${d.x},${d.y})`);

node.append('rect')
  .attr('height', (d: any) => d.dy)
  .attr('width', sankey.nodeWidth())
  .style('fill', (d: any) => d.color);

node.append('text')
  .attr('x', -6)
  .attr('y', (d: any) => d.dy / 2)
  .attr('dy', '.35em')
  .attr('text-anchor', 'end')
  .text((d: any) => d.name)
  .filter((d: any) => d.x < width / 2)
  .attr('x', 6 + sankey.nodeWidth())
  .attr('text-anchor', 'start');