Question

After fiddling around for several hours now, I still cannot make labels work in my D3 Sunburst layout. Here’s how it looks like:

http://codepen.io/anon/pen/BcqFu

I tried several approaches I could find online, here’s a list of examples I tried with, unfortunately all failed for me:

[cannot post link list because of new users restriction]

and of course the coffee flavour wheel: http://www.jasondavies.com/coffee-wheel/

At the moment i fill the slices with a title tag, only to have it displayed when hovering over the element. For that I’m using this code:

 vis.selectAll("path")
   .append("title")
   .text(function(d) { return d.Batch; });

Is there something similar I could use to show the Batch number in the slice?

—

More info: Jason Davies uses this code to select and add text nodes:

var text = vis.selectAll("text").data(nodes);
var textEnter = text.enter().append("text")
  .style(...)
  ...

While the selection for his wheel gives back 97 results (equaling the amount of path tags) I only get one and therefore am only able to display one label (the one in the middle)

Answer 1

Needs some finessing but the essential piece to get you started is:

  var labels = vis.selectAll("text.label")
      .data(partition.nodes)
    .enter().append("text")
      .attr("class", "label")
      .style("fill", "black")
      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
      .text(function(d, i) { return d.Batch;} );

You can see it here

The trick is that in addition to making sure you are attaching text nodes to the appropriate data you also have to tell them where to go (the transform attribute with the handy centroid function of the arc computer).

Note that I do not need vis.data([json]) because the svg element already has the data attached (when you append the paths), but I still have to associate the text selection with the nodes from each partition.

Also I class the text elements so that they will not get confused with any other text elements you may want to add in the future.