d3.js - D3.js 圆环图... arc.centroid(d) 不受 d.innerRadius 和 d.outerRadius 的影响

Question

我正在创建一个甜甜圈（或饼图），并且我想将标签放在该区域之外。我为它创建了一个小提琴http://jsfiddle.net/VeeTee/mA3V7/。

arcs.append("svg:text")
    .attr("transform", function(d) {
        //this is where I want to make a translation to the outside border
        d.innerRadius = radius;
        d.outerRadius = height/2;
        return "translate(" + arc.centroid(d) +")";
    })
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function(d, i) { return d.value.toFixed(2); });

arc.centroid(d) -> 总是给出相同的结果（因此是相同的翻译）

Answer 1

不知道你的意思是什么，它总是给你相同的结果，但你可以通过将质心的坐标乘以 1.5 将标签放在图表之外。代码是这样的。

.attr("transform", function(d) {
        var c = arc.centroid(d);
        return "translate(" + c[0]*1.5 +"," + c[1]*1.5 + ")";
    })

在这里更新了 jsfiddle 。