After successfully creating a bar chart, I decided to work on a donut chart using Angular and d3.js. However, despite creating the donut chart, I'm facing an issue with displaying it on the screen. The DOM shows that it is present, but for some reason, it's not visible. You can view the image of the issue https://i.sstatic.net/rG1Fq.png
Here is the data code that will be passed into the chart:
public data:any =
{a: 9, b: 20, c:30, d:8, e:12};
I've double-checked my code for parsing and drawing the donut chart, but I'm unsure why it's not working. I even tried using a debugger to pinpoint the problem. Here is the snippet of my code:
private drawDonut(dataSet: any[]): void{
let svg = d3.select('figure#donutChart').select('svg')
.append('svg')
.attr("width", this.width)
.attr("height", this.height)
.append("g")
.attr("transform", "translate(" + this.width / 2 + "," +
this.height / 2 + ")");
console.log(this.data)
//creating the colors in the donut chart for the
different data values
var color = d3.scaleOrdinal()
.domain(dataSet)
.range(["#e7968b" , "#88b0ea" , "#66b447", "#744921 " , "#ffb02a"])
const donut = d3.pie<any>()
.value(d=>d[1]);
//const sortedata = Object.entries(dataSet).sort((a, b)
=> Number(b[1]) - Number(a[1]))
const dataInput = donut(Object.entries(dataSet))
// building the pie chart
svg
.selectAll('donutChart')
.data(dataInput)
.join('path')
.attr('d', d3.arc<any>())
.attr('fill', function(d: { data: string[]; }):any {
console.log("!!!!!!",d.data[1]);
return(color(d.data[1])) })
.attr("stroke", "white")
.style("stroke-width", "1px")
If anyone can provide assistance in identifying the issue, it would greatly benefit future projects.