html - 标签未显示在 D3 圆环图上

Question

D3 的新功能。制作圆环图但仅显示部分标签，不知道为什么。

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> 

Answer 1

看起来标签位于 svg 之外。您可以通过更改

轻松看到这一点

labelr = r + 30;

到

labelr = r - 30;

您可以通过如上所述减小半径(如果您不介意标签接触圆环图)或增加 svg 的大小以便为标签留出空间来解决此问题。

如果您想在保持控制图像宽度和高度的能力的同时为标签留出空间，您可以添加一个缩放常量。

收缩 = 60

将圆的半径减小这个量:

r = Math.min(w, h)/2 - 收缩，

然后平移圆圈，使其位于 svg 的中间:

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

这是一个固定版本的 fiddle 。 http://jsfiddle.net/JonathanPullano/qA6t6/13/