javascript - 弧外标签线(饼图)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

您的代码和您引用的代码之间的唯一区别是 donut 的内外半径与半径的比率。因此，您应该对计算中使用的静态值进行一些调整以在您的图表上起作用。

所做的调整如下。

• 将 -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>