標籤不在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甜甜圈圖上顯示

回答

相關問題