Struggling with centering text inside a d3 donut chart for a project. While trying to modify a piece of code, I find myself lost in the complexity of it.
Despite my efforts, the text added to the center is not perfectly centered. I have attempted various CSS adjustments like 'margin-top', but none seem to work effectively. Can anyone provide guidance on how to achieve proper centering?
Below is the snippet responsible for attaching the text:
svg.append("text")
.attr({
"text-anchor": "middle",
}).style({'fill': 'red', 'font-size': '18px'}).text(calories);
};
Here's the Codepen link for reference: http://codepen.io/anon/pen/xwwBBm