防止 D3 饼图中的文本重叠 [英] Preventing overlap of text in D3 pie chart

问题描述

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

我的情况是，饼图上显示的国家/地区重叠:

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

以获得更全面的解决方案.

<小时>

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

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

//获取圆弧上的角度，然后旋转-90度var getAngle = 函数 (d) {返回 (180/Math.PI * (d.startAngle + d.endAngle)/2 - 90);};g.append("文本").attr(转换"，函数(d){返回 "translate(" + pos.centroid(d) + ") " +"旋转(" + getAngle(d) + ")";}).attr("dy", 5).style("文本锚", "开始").text(function(d) { return d.data.label; });

I've been googling around, but I can't seem to grasp this.

My situation is that the countries overlap when presented on the pie chart:

This is an example of what is happening:

jsfiddle

I am a total beginner to D3 and am trying to prevent text overlap. Is there like a text margin attribute that I can add such that my labels don't overlap each other?

解决方案

Update: See the answer to D3 put arc labels in a Pie Chart if there is enough space for a more comprehensive solution.

---

I do not know any generic method of laying text elements such that they do not overlap.

However, there is a workaround for your problem by rotating the labels and scaling the graph such that they do not overlap: 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; });

这篇关于防止 D3 饼图中的文本重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！