[英]Label placement outside circles without overlap using layout.pack
I'm very new to d3 and I'm building a chart using d3.layout.pack. 我是d3的新手,正在使用d3.layout.pack建立图表。
I would like to place the text labels of every circle outside the circle, but without overlapping other labels or other circles. 我想将每个圆圈的文本标签放置在圆圈之外,但不要与其他标签或其他圆圈重叠。
Like this: bubble chart using d3.layout.pack 像这样: 使用d3.layout.pack的气泡图
Any ideas? 有任何想法吗?
Thanks a lot 非常感谢
pd: this is what i've tried: pd: 这是我尝试过的:
var nodes = d3.layout.pack()
.value(function(d) { return d.size; })
.size([w, h]).padding(333)
.nodes(data);
I would suggest another approach: to place labels/text
along the top of the circles, and only for fairly large circles... This will not solve overlap problem completely, but visual organization will be better, in my opinion. 我建议另一种方法:将
labels/text
沿着圆圈的顶部放置,并且仅用于相当大的圆圈...这无法完全解决重叠问题,但我认为视觉组织会更好。
Here is the jsfiddle of an example illustrating the approach. 这是说明该方法的示例的jsfiddle 。
The details are described in another SO question/answer 在另一个SO问题/答案中描述了详细信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.