防止 D3 饼图中的文本重叠答案

【问题标题】：Preventing overlap of text in D3 pie chart防止 D3 饼图中的文本重叠
【发布时间】：2013-01-10 03:18:50
【问题描述】：

我一直在谷歌上搜索，但我似乎无法理解这一点。

我的情况是饼图上显示的国家重叠：

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

jsfiddle

我是D3 的初学者，并试图防止文本重叠。有没有我可以添加的文本边距属性，这样我的标签就不会相互重叠？

【问题讨论】：

标签： javascript d3.js label pie-chart overlap

【解决方案1】：

更新：查看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; });

【讨论】：

【解决方案2】：

另一种解决方案是更改数据的顺序，将美国放在首位。您可能会发现饼图布局的角度更具可读性。

var data_values = [48, 1, 1, 1, 1, 1, 1, 4];
var titles = ["USA","Pakistan", "Israel", "Netherlands", "Italy", "Uruguay",       "United Kingdom", "Austria", "China"]

http://jsfiddle.net/rocky1616/oLzsrd4o/

Musically_ut 的解决方案在这里也可以很好地工作。如果这在您的设计中有效，您甚至可以将角度降低一点。

  var getAngle = function (d) {
      return (180 / Math.PI * (d.startAngle + d.endAngle) / 2 + 45);
  };

http://jsfiddle.net/2uT7F/26/

您需要创建一个 if else 块来处理 USA 项目，但如果有帮助，这是一个开始。

【讨论】：