为什么我的D3 svg没有显示在屏幕上？

Question

这是我的密码！我使用角和d3库来制作一个简单的形状，但是屏幕上什么也没有显示。

饼形图TS文件：

@Component({
  selector: 'pie-chart',
  templateUrl: './pie-chart.component.html',
  styleUrls: ['./pie-chart.component.css'],
})

export class PieChartComponent {
  svg = d3
    .select('#canvasarea')
    .append('svg')
    .attr('width', 400)
    .attr('height', 100);

  circle = this.svg
    .append('circle')
    .attr('cx', 200)
    .attr('cy', 200)
    .attr('r', 50)
    .attr('fill', 'blue');
}

饼图HTML文件：

<div id="canvasarea"></div>

app-component.html：

<pie-chart></pie-chart>

Answer 1

如前所述，您确实需要添加带有r属性的半径。您还需要在角组件中呈现视图，以添加svg并对其执行操作。

import { AfterViewInit, Component } from '@angular/core';
import * as d3 from 'd3';

@Component({
  selector: 'pie-chart',
  templateUrl: './pie-chart.component.html',
  styleUrls: ['./pie-chart.component.css'],
})
export class PieChartComponent implements AfterViewInit {
  public svg: any = null;

  constructor() { }

  ngAfterViewInit(): void {
    this.svg = d3
      .select('#canvasarea')
      .append('svg')
      .attr('width', 400)
      .attr('height', 100);

    this.svg
      .append('circle')
      .attr('cx', 50)
      .attr('cy', 50)
      .attr('r', 20)
      .style('fill', 'blue');
  }
}