防止D3饼图中的文本重叠

Question

我一直在谷歌搜索,但我似乎无法掌握这一点.

我的情况是,在饼图上显示时各国重叠:

这是正在发生的事情的一个例子:

的jsfiddle

我是一个初学者D3,我正在努力防止文本重叠.有没有像我可以添加的文本边距属性,以便我的标签不会相互重叠？

Answer 1

更新:如果有足够的空间来提供更全面的解决方案,请参阅D3将圆弧标签放在饼图中的答案.

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

但是,通过旋转标签和缩放图形以使它们不重叠,可以解决您的问题: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; });