为什么我的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>

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