Adding text to the center of a D3 Donut Graph
You can simplify your code quite a bit. Since you are already centering the pie chart:
var svg = d3.select("#svgContent").append("svg")
.attr("width",width)
.attr("height",height)
.append("g")
.attr("transform","translate("+width/2+","+height/2+")");
You can just add the text as follows:
svg.append("text")
.attr("text-anchor", "middle")
.text("$" + totalValue);
Note that since you are only adding one <text>
, you don't need to bind any data to it, and can pass .text(...)
a value directly instead of a function.
Brian
Updated on July 24, 2022Comments
-
Brian almost 2 years
I am trying to insert basically a label to the center of a donut graph using D3. I was able to work with an existing code I found and manipulate it so all the slices of the graph mesh in the middle to appear like there is a label there, but I think it'd be a better idea just to figure out how to make it a more permanent home in the center. I am very new to JS and D3.
Any help is grealty appreciated.
Thank you
This is currently the code that is falsifying a label being in the center.
svg.selectAll("text").data(pie(data)).enter() .append("text") .attr("class","label1") .attr("transform", function(d) { var dist=radius-120; var winkel=(d.startAngle+d.endAngle)/2; var x=dist*Math.sin(winkel)-4; var y=-dist*Math.cos(winkel)-4; return "translate(" + x + "," + y + ")"; })