D3圆环图上不显示标签 [英] Labels not displaying on D3 donut chart

问题描述

新到D3。制作圆环图表，但只显示部分标签，不知道为什么。

http://dailyspiro.com/impact.html

  var data = [
 {name：Facebook，val：26}，
 {name：Gmail，val：19} b $ b {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， 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 （svg：g）
 .attr（class，arc）
 .attr（transform，translate + 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定理
h = Math.sqrt（x * x + y * y）; 
 returntranslate（+（x / h * labelr）+'，'+ 
（y / h * labelr）+）; 
}）
 .attr ，.35em）
 .attr（text-anchor，function（d）{
 //我们过中心吗？
 return（d.endAngle + d.startAngle） / 2> Math.PI？
end：start; 
}）
 .text（function（d，i）{return d.data.name;}）; 
 
< / script> 
  

解决方案

看起来标签位于svg。通过更改

labelr = r + 30;

b $ b

到

labelr = r - 30;

你可以通过减小上面的半径（如果你不介意标签接触环形图）或增加svg的大小，以便有空间的标签来解决这个问题。 p>

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

shrink = 60

将圆的半径减少此数量： / p>

r = Math.min（w，h）/ 2-- shrink，

然后翻译圈子，使它停留在svg的中间：

.attr ，translate（+（r + shrink）+，+（r + shrink）+））;

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

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> 

解决方案

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

labelr = r + 30;

to

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/

这篇关于D3圆环图上不显示标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！