html饼图缩放页面时重叠,javascript – 防止D3饼图中的文本重叠

更新：请参阅

D3 put arc labels in a Pie Chart if there is enough space的答案以获得更全面的解决方案.

我不知道任何放置文本元素的通用方法,使它们不重叠.

但是,通过旋转标签和缩放图形以使它们不重叠,可以解决您的问题：http://jsfiddle.net/2uT7F/

// Get the angle on the arc and then rotate by -90 degrees

var getAngle = function (d) {

return (180 / Math.PI * (d.startAngle + d.endAngle) / 2 - 90);

};

g.append("text")

.attr("transform", function(d) {

return "translate(" + pos.centroid(d) + ") " +

"rotate(" + getAngle(d) + ")"; })

.attr("dy", 5)

.style("text-anchor", "start")

.text(function(d) { return d.data.label; });