javascript - 弧外标签(饼图)d3.js

Question

我是 d3.js 的新手，我正在尝试用它制作饼图。我只有一个问题:我无法让我的标签超出我的弧线......标签用 arc.centroid 定位

arcs.append("svg:text")
    .attr("transform", function(d) {
        return "translate(" + arc.centroid(d) + ")";
    })
    .attr("text-anchor", "middle")

谁能帮我解决这个问题？

Answer 1

我可以用三 Angular 函数解决这个问题 :)。

参见 fiddle :http://jsfiddle.net/nrabinowitz/GQDUS/

基本上，调用 arc.centroid(d) 会返回一个 [x,y] 数组。您可以使用毕达哥拉斯定理来计算斜边，即从饼图中心到圆弧质心的直线长度。然后，您可以使用计算 x/h * desiredLabelRadius 和 y/h * desiredLabelRadius 来计算标签 anchor 所需的 x,y:

.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) +  ")"; 
})

这里唯一的缺点是 text-anchor: middle 不再是一个很好的选择 - 你最好根据它设置 text-anchor我们正在做的馅饼的一面:

.attr("text-anchor", function(d) {
    // are we past the center?
    return (d.endAngle + d.startAngle)/2 > Math.PI ?
        "end" : "start";
})