No estoy seguro de por qué mi SVG no se muestra en la pantalla. El registro de la consola dice "falso", lo que supongo que significa que se rechazó una promesa
Este es mi archivo TS
export class PieChartComponent implements AfterViewInit { //other initializations removed for brevity convertedData: Map<string, number> = new Map(); ngAfterViewInit() { d3.csv('app/data/data.csv').then((data) => { data.forEach((d) => { this.convertedData.set(d['name'], Number(d['age'])); }); }); this.svg = d3 .select('#canvas-area') .append('svg') .attr('width', 400) .attr('height', 400); this.circles = this.svg.selectAll('circle').data(this.convertedData); this.circles .enter() .append('circle') .attr('cx', (d, i) => i * 50 + 50) .attr('cy', 250) .attr('r', (d) => 2 * d[0]) .attr('fill', (d) => { if (d[1] == 'Jessica') return 'blue'; return 'red'; }); } }Y, este es mi archivo HTML:
<div id="canvas-area"></div>Mi archivo data.csv básicamente tiene esto:
name,age Tony,10 Jessica,12 Andrew,9 Emily,10 Richard,11d3.csv() es una promesa, pero no está esperando que se complete, por lo que es muy probable que this.convertedData esté vacío cuando intente usarlo.
Necesitas actualizar tu código a algo como esto:
async ngAfterViewInit() { await d3.csv('app/data/data.csv').then((data) => { data.forEach((d) => { this.convertedData.set(d['name'], Number(d['age'])); }); }); // the rest of your code }