Question

D3新手。制作圆环图但只显示一些标签，不确定原因。

      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的大小以便标签有空间。

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

shrink = 60

按此数量减少圆的半径：

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

然后翻译圆圈使其保持在svg：

的中间

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

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

Answer 2

此处发生的冲突是在确定图表宽度和高度以及标签对齐的位置。

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

您正在指定画布区域外的标签

默认情况下，D3会隐藏画布区域之外的标签，因为溢出：隐藏属性。

所以分配图轴很好。

标签没有显示在D3圆环图上

2 个答案: