[英]D3Js donut chart, avoid label text overlay's
In my project I have big mount of different charts, everything handled with D3Js. 在我的项目中,我有大量不同的图表,一切都用D3Js处理。 One of charts should to be donut type with labels.
其中一个图表应该是带有标签的甜甜圈类型。 So based on this tutorial I made this graph
所以基于这个教程,我制作了这张图
.
。 As you can see sometimes (depends on data) label text goes overlay's.
正如您所看到的那样(取决于数据)标签文字会叠加。
My question is there any way to make it like in example below, based on highcharts from here : 我的问题是有没有办法让它像下面的例子,基于这里的高图 :
Thanks. 谢谢。
I think there is a solution for the problem of labels getting overlapped, using contraint relaxing when you call the label up at: Solving D3 Label Placement with Constraint Relaxing . 我认为标签重叠的问题有一个解决方案,当您调用标签时使用约束放松 : 使用约束放松解决D3标签放置 。
I had a quick look at the labels here and it seems to work. 我快速浏览了这里的标签,似乎有效。 This is my modified code snippet here:
这是我修改过的代码段:
alpha = 0.5;
spacing = 5;
function relax() {
again = false;
text.each(function (d, i) {
a = this;
da = d3.select(a);
y1 = da.attr("y");
text.each(function (d, j) {
b = this;
// a & b are the same element and don't collide.
if (a == b) return;
db = d3.select(b);
// a & b are on opposite sides of the chart and
// don't collide
if (da.attr("text-anchor") != db.attr("text-anchor")) return;
// Now let's calculate the distance between
// these elements.
y2 = db.attr("y");
deltaY = y1 - y2;
// If spacing is greater than our specified spacing,
// they don't collide.
if (Math.abs(deltaY) > spacing) return;
// If the labels collide, we'll push each
// of the two labels up and down a little bit.
again = true;
sign = deltaY > 0 ? 1 : -1;
adjust = sign * alpha;
da.attr("y",+y1 + adjust);
db.attr("y",+y2 - adjust);
});
});
if(again) {
setTimeout(relax,20)
}
}
relax();
Just follow the next step in the tutorial linked above for updating the polylines to follow the labels to their new positions. 只需按照上面链接的教程中的下一步操作,即可更新折线以跟随标签到新位置。 Good luck!
祝好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.