我是 d3.js 的新手,我正在尝试用它制作饼图。 我只有一个问题:我无法让我的标签超出我的弧线...... 标签用 arc.centroid 定位
arcs.append("svg:text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
谁能帮我解决这个问题?
最佳答案
我可以用三 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";
})
关于javascript - 弧外标签(饼图)d3.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8053424/