¡Aquí está mi código! Estoy usando la biblioteca angular y d3 para hacer una forma simple, pero no aparece nada en la pantalla.
Archivo TS de gráfico circular:
@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'); }Archivo HTML de gráfico circular:
<div id="canvasarea"></div>aplicación-componente.html:
<pie-chart></pie-chart>Como se mencionó anteriormente, de hecho, debe agregar un radio con el atributo r. Y también necesita que la vista se haya renderizado en su componente angular para agregar el svg y realizar la operación en él
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'); } }