Adding labels on D3js Sunburst

Question

im new to d3js and im trying to put some labels on a D3js v4 Sunburst like this :

Have you an idea how to do this ? I have found nothing for help me.

I have use this example https://bl.ocks.org/kerryrodden/766f8f6d31f645c39f488a0befa1e3c8 for help me to achieve a sunburst.

Answer 1

You can try the following plan:

As far as I understand, you want to put labels at specific arcs, based on some criteria or manually select them. So you get a subset of nodes like this:

var nodesForLabels = nodes.filter(d => d.value > 1)

After that you need to put text labels in centroids of arcs:

vis.selectAll('.label').data(nodesForLabels).enter().append('text')
  .attr('x', d => arc.centroid(d)[0])
  .attr('y', d => arc.centroid(d)[1])
  .attr('text-anchor', 'middle')
  .text(d => Math.round(d.value / partition.value * 100) + '%')