弧线以外的标签线（饼图）d3.js

Question

我是D3js的新手，想为饼图的外部标签添加线条。 这里是代码。它显示的标签，但我想连接它与弧的线。

我需要类似this但无法为我的示例生成。

JavaScript的：

var data = [ 
 
    {name: "A", val: 11975}, 
 
    {name: "B", val: 5871}, 
 
    {name: "C", val: 8916} 
 
]; 
 

 
var w = 400, 
 
    h = 400, 
 
    r = Math.min(w, h)/2, 
 
    labelr = r + 30, // radius for label anchor 
 
    color = d3.scale.category20(), 
 
    donut = d3.layout.pie(), 
 
    arc = d3.svg.arc().innerRadius(r * .6).outerRadius(r); 
 

 
var vis = d3.select("body") 
 
    .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 + ")"); 
 

 
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.value.toFixed(2); });

<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.6"></script> 
 
<script src='http://mbostock.github.com/d3/d3.layout.js?2.4.6' type='text/javascript'></script> 
 

 
<div id="chart"></div>

Answer 1

您的代码和你指的代码之间的唯一区别是在圆环的内，外半径相对于半径的比率。因此，您应该对计算中使用的静态值进行一些调整以处理图表。

作出的调整如下。

• 更改-75至45自内半径增加20
• 更改-20至+30 自外半径增加50

希望这有助于。

var data = [ 
 
    {name: "A", val: 11975}, 
 
    {name: "B", val: 5871}, 
 
    {name: "C", val: 8916} 
 
]; 
 

 
var w = 400, 
 
    h = 400, 
 
    r = Math.min(w, h)/2, 
 
    labelr = r + 30, // radius for label anchor 
 
    color = d3.scale.category20(), 
 
    donut = d3.layout.pie(), 
 
    arc = d3.svg.arc().innerRadius(r*.6).outerRadius(r); 
 

 
console.log(r * .6) 
 
console.log(r-100) 
 

 
var vis = d3.select("body") 
 
    .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 + ")"); 
 

 
arcs.append("svg:path") 
 
    .attr("fill", function(d, i) { return color(i); }) 
 
    .attr("d", arc); 
 

 
arcs.append("text") 
 
    .attr("text-anchor", "middle") 
 
    .attr("x", function(d) { 
 
     var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2; 
 
     d.cx = Math.cos(a) * (r - 45); 
 
     return d.x = Math.cos(a) * (r+30); 
 
    }) 
 
    .attr("y", function(d) { 
 
     var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2; 
 
     d.cy = Math.sin(a) * (r - 45); 
 
     return d.y = Math.sin(a) * (r+30); 
 
    }) 
 
    .text(function(d) { return d.value.toFixed(2); }) 
 
    .each(function(d) { 
 
     var bbox = this.getBBox(); 
 
     d.sx = d.x - bbox.width/2 - 2; 
 
     d.ox = d.x + bbox.width/2 + 2; 
 
     d.sy = d.oy = d.y + 5; 
 
    }); 
 

 
vis.append("defs").append("marker") 
 
    .attr("id", "circ") 
 
    .attr("markerWidth", 6) 
 
    .attr("markerHeight", 6) 
 
    .attr("refX", 3) 
 
    .attr("refY", 3) 
 
    .append("circle") 
 
    .attr("cx", 3) 
 
    .attr("cy", 3) 
 
    .attr("r", 3); 
 

 
arcs.append("path") 
 
    .attr("class", "pointer") 
 
    .style("fill", "none") 
 
    .style("stroke", "black") 
 
    .attr("marker-end", "url(#circ)") 
 
    .attr("d", function(d) { 
 
     if(d.cx > d.ox) { 
 
      return "M" + d.sx + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy; 
 
     } else { 
 
      return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy; 
 
     } 
 
    });

<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.6"></script> 
 
<script src='http://mbostock.github.com/d3/d3.layout.js?2.4.6' type='text/javascript'></script> 
 

 
<div id="chart"></div>