标签不在D3甜甜圈图上显示

D3的新功能。制作甜甜圈图表，但只有一些标签正在显示，不知道为什么。标签不在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>

来源

2014-03-06 Ben Davidow

小提琴链接请 –

http://jsfiddle.net/qA6t6/ –

它看起来像标签被放置在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/

来源

2014-03-06 22:19:12

这里发生的冲突是在确定图表的宽度和高度以及标签对齐的地方。

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

你画布区域

外指定标签默认情况下D3将隐藏标签这是因为溢出的画布区域以外：隐藏属性。

因此，分配图轴很好。

来源

2014-03-06 22:32:56

http://jsfiddle.net/qA6t6/11/ –

标签不在D3甜甜圈图上显示

回答

相关问题