Looking For A Way To Display Labels On Sunburst Chart (could Not Find A Working Example)

Thanks to someone's help (Brandon), I've been able to add tooltips to the sunburst charts. I am still looking for a way to display the label of a path on the sunburst chart (and th

Solution 1:

Simply append svg:text elements to the canvas:

path.append("svg:text")
  .attr("transform", function(d) { return"rotate(" + (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180 + ")"; })
  .attr("x", function(d) { return d.y; })
  .attr("dx", "6") // margin
  .attr("dy", ".35em") // vertical-align
  .text(function(d) { return d.name; });

However, in my edit, this will break your magnify function, so i create an svg group to hold together each pair of path and text. In my opinion, elements are better organized this way, easier to query in the future.

Note that you need to modify your magnify function to also animate the text, as for now it only animate the path and leave the text at their original position.

group = svg.data([getData()]).selectAll("path")
  .data(partition.nodes)
  .enter().append('svg:g');

//path variable is required by magnify function
path = group.append("svg:path")
  .attr("d", arc)
  .style("fill", function(d) { returncolor((d.children ? d : d.parent).name); })
  .on("click", magnify)
  .on("mouseover", function(d) {
    tooltip.show([d3.event.clientX,d3.event.clientY],'<div>'+d.name+'</div><div>'+d.value+'</div>')
  })
  .on('mouseout',function(){
    tooltip.cleanup()
  }) 
  .each(stash);

// you may need to assign the result to a variable, // for example to animate the text in your magnify function, // as shown in the path variable above
group.append("svg:text")
  .attr("transform", function(d) { return"rotate(" + (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180 + ")"; })
  .attr("x", function(d) { return d.y; })
  .attr("dx", "6") // margin
  .attr("dy", ".35em") // vertical-align
  .text(function(d) { return d.name; });

Code was taken from your given example, however I edited the x attribute into .attr("x", function(d) { return d.y; }) to properly position the text based on your data structure (the example uses Math.sqrt(d.y)). I also modify the text function to return d.name

here is the jsFiddle