CODEWITHSUNDEEP
javascriptd3.js
Metra
Metra

Reputation: 393

Adding labels on D3js Sunburst

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

enter image description here

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.

Upvotes: 0

Views: 548

Answers (1)

Yaroslav Sergienko
Yaroslav Sergienko

Reputation: 720

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) + '%')

Upvotes: 1

Related Questions