如何正确地向d3饼图添加标签？

Question

I made a pie chart using d3 js and I want to add labels to the every path.

I wrote some code:

var labels = svg.selectAll('path').insert("text").data(pie(data))
       .text( function (d) { return d.value; })
       .attr("font-family", "sans-serif")
       .attr('x', 0)           
       .attr('y', 0)
       .attr("font-size", "12px")
       .attr("fill", "red");

but there is no visible result, only I can see that there are new text elements in the Chrome developer tools.

How I need to change my code to see all labels on the pieces of my pie chart?

Answer 1

You cannot append text node as a child for path . You should group these elements with g tag and append path s and text s as a child for g elements.

// append "g" it is a container for your slice and label
var arcs = vis.selectAll("g.slice")
  .data(pie)
  .enter()
  .append("g")
  .attr("class", "slice");

// draw slice of pie chart
arcs.append("path")
    .attr("fill", function(d, i){
        return color(i);
    })
    .attr("d", function (d) {
        return arc(d);
    });

// draw label
arcs.append("text")
  .attr("transform", function(d){
      d.innerRadius = 0;
      d.outerRadius = r;
      return "translate(" + arc.centroid(d) + ")";
    })
    .attr("text-anchor", "middle")
    .text( function(d, i) {
      return data[i].label;}
    );

In this case, your structure will look like:

<g>
 <path d=...></path>
 <text>some text</text>
</g>
<g>
 <path d=...></path>
 <text>some text</text>
</g>
...

Check working example:

 var w = 280; var h = 280; var r = h/2; var color = d3.scale.category20c(); var data = [{"label":"Category A", "value":20}, {"label":"Category B", "value":50}, {"label":"Category C", "value":30}]; var vis = d3.select('body').append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")"); var pie = d3.layout.pie().value(function(d){return d.value;}); var arc = d3.svg.arc().outerRadius(r); var arcs = vis.selectAll("g.slice") .data(pie) .enter() .append("g") .attr("class", "slice"); arcs.append("path") .attr("fill", function(d, i){ return color(i); }) .attr("d", function (d) { return arc(d); }); arcs.append("text") .attr("transform", function(d){ d.innerRadius = 0; d.outerRadius = r; return "translate(" + arc.centroid(d) + ")"; }) .attr("text-anchor", "middle") .text( function(d, i) { return data[i].label;} ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>