Adding Text To The Center Of A D3 Donut Graph

Fiddle 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

Solution 1:

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.