Labels not displaying on D3 donut chart

问题

New to D3. Making a donut chart but only some of the labels are displaying, not sure why.

http://dailyspiro.com/impact.html

      var data = [
          {name: "Facebook", val: 26},  
          {name: "Gmail", val: 19}, 
          {name: "Twitter", val: 7},  
          {name: "Jane's Blog", val: 5}, 
          {name: "Other", val: 21 }
      ];

      var w = 400,
          h = 400,
          r = Math.min(w, h) / 2,
          labelr = r + 30, // radius for label anchor
          donut = d3.layout.pie(),
          arc = d3.svg.arc().innerRadius(r * .6).outerRadius(r);

      var vis = d3.select(".impact-chart")
        .append("svg:svg")
          .data([data])
          .attr("width", w + 150)
          .attr("height", h);

      var arcs = vis.selectAll("g.arc")
          .data(donut.value(function(d) { return d.val }))
        .enter().append("svg:g")
          .attr("class", "arc")
          .attr("transform", "translate(" + (r + 30) + "," + r + ")");

      var color = d3.scale.ordinal()
          .range(["#C1B398", "#605951", "#FBEEC2", "#61A6AB", "#ACCEC0", "#bbb"]);

      arcs.append("svg:path")
          .attr("fill", function(d, i) { return color(i); })
          .attr("d", arc);

      arcs.append("svg:text")
          .attr("transform", function(d) {
              var c = arc.centroid(d),
                  x = c[0],
                  y = c[1],
                  // pythagorean theorem for hypotenuse
                  h = Math.sqrt(x*x + y*y);
              return "translate(" + (x/h * labelr) +  ',' +
                 (y/h * labelr) +  ")"; 
          })
          .attr("dy", ".35em")
          .attr("text-anchor", function(d) {
              // are we past the center?
              return (d.endAngle + d.startAngle)/2 > Math.PI ?
                  "end" : "start";
          })
          .text(function(d, i) { return d.data.name;});

      </script>

回答1:

It looks like the labels are being positioned outside of the svg. You can easily see this by changing

labelr = r + 30;

labelr = r - 30;

You can fix this by either reducing the radius as above (if you don't mind that the labels touch the donut chart), or increasing the size of the svg so there is room for the labels.

If you want to allow room for the labels while maintaining the ability to control the width and height of the image, you can add a scaling constant.

shrink = 60

Reduce the radius of the circle by this amount:

r = Math.min(w, h) / 2 - shrink,

And then translate the circle so that it stays in the middle of the svg:

.attr("transform", "translate(" + (r+shrink) + "," + (r+shrink) + ")");

Here is a fiddle with a fixed version. http://jsfiddle.net/JonathanPullano/qA6t6/13/

回答2:

The conflict happening here was at the place determining the width and height of the chart and the label align.

          w = 400,
          h = 400,
          r = Math.min(w, h) / 2,
          labelr = r + 30,

you are specifying the labels outside of canvas area

By default D3 will hide the label which is outside of canvas area, because of overflow:hidden property.

So assign graph axis fine.

来源：https://stackoverflow.com/questions/22237136/labels-not-displaying-on-d3-donut-chart

标签

html

css

d3.js