在我的项目中,我有大量不同的图表,一切都用 D3Js 处理。其中一张图表应该是带有标签的甜甜圈类型。因此,根据本教程,我制作了这张图。正如您有时看到的(取决于数据)标签文本会覆盖。
我的问题是有什么方法可以使它像下面的例子一样,基于here的highcharts :
谢谢。
我认为标签重叠的问题有一个解决方案,当您在以下位置调用标签时使用约束放松:使用约束放松解决 D3 标签放置。
我快速浏览了这里的标签,它似乎有效。这是我修改后的代码片段:
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();
只需按照上面链接的教程中的下一步更新折线以跟随标签到新位置。祝你好运!