How can add text to the center of a D3 sunburst diagram

Question

I am using the zoomable sunburst example but I am struggling trying to add a text to the center of the diagram and still make it zoomable. The idea is that the text in the center will change when I click on a certain arc indicating its length. It seems that the properties of the mouseclick and mouseover dissapear. This is what I have tried:

path.append("svg:text")
        .on("click",click)
        .style("font-size","4em")
        .style("font-weight","bold")
        .text(function(d) { return count_function(data); });

Can someone help me understand how to display the text in th center of the chart without losing the click functionality?

Maybe an easier approach would be to select the "g" that represents the circular centre and add text to it once the chart was been displayed. I have tried this but I am unable to successfylly select just this element (sorry I am new to D3), so back to square one.

Answer 1

It looks like you're trying to insert a text element inside a path element. Try something like this:

svg.select("g").append("svg:text")
    .on("click",click)
    .style("font-size","4em")
    .style("font-weight","bold")
    .text(function(d) { return count_function(data); });