Not sure why my SVG is not rendering in the screen. The console log says "false" which I assume means that a promise was rejected
This is my TS file
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';
});
}
}
And, this is my HTML file:
<div id="canvas-area"></div>
My data.csv file basically has this:
name,age
Tony,10
Jessica,12
Andrew,9
Emily,10
Richard,11
d3.csv() is a promise but you are not awaiting its completion, so this.convertedData is most probably empty when you try to use it.
You need to update your code to something like this:
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
}