D3Js 圆环图，避免标签文本覆盖

Posted 2023-02-22

【中文标题】D3Js 圆环图，避免标签文本覆盖

【英文标题】：D3Js donut chart, avoid label text overlay's

【发布时间】：2015-04-09 00:24:12

【问题描述】：

在我的项目中，我有大量不同的图表，一切都使用 D3Js 处理。其中一张图表应该是带有标签的甜甜圈类型。所以基于这个tutorial我制作了这个图表。正如您有时看到的（取决于数据）标签文本会覆盖。

我的问题是根据here: 的高图，有什么方法可以使它像下面的示例一样。

谢谢。

【参考方案1】：

我认为有一个解决标签重叠问题的方法，当您在Solving D3 Label Placement with Constraint Relaxing 上调用标签时使用约束放松。

我快速浏览了这里的标签，它似乎有效。这是我修改后的代码sn-p：

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();

fiddle

只需按照上面链接的教程中的下一步更新折线以跟随标签到达新位置。祝你好运！