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

Question

这是我的代码！我正在使用 angular 和 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>

应用-component.html:

<pie-chart></pie-chart>

Answer 1

如上所述，您确实需要添加一个具有 r 属性的半径。而且您还需要在 angular 组件中呈现视图以添加 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');
  }
}

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

Why is my D3 svg not showing on the screen?

javascript

svg

d3.js

typescript

angular