d3.js – 如何在半圆形图表的两半上设置标签？

2023年10月28日 318次阅读

我正在制作半圆形圆环图,目前看起来像这样：
https://jsfiddle.net/rcxp0udt/

您可以注意到所有标签都位于图表的右侧.但是,我想让它们看起来像这样：http://prntscr.com/d4p8qb – 所以半圆的前半部分的标签位于一侧,另一半位于另一侧.以下是负责该代码的代码部分：

 polyline.transition().duration(1000)
    .attrTween("points", function(d){
        this._current = this._current || d;
        var interpolate = d3.interpolate(this._current, d);
        this._current = interpolate(0);
        return function(t) {
            var d2 = interpolate(t);
            var pos = outerArc.centroid(d2);
            pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
            return [arc.centroid(d2), outerArc.centroid(d2), pos];
        };
    });

但是,到目前为止,我在测试中尝试实现这一目标的每个解决方案最终都失败了.如果你有任何想法如何达到这个效果,请告诉我！

最佳答案 而不是使用midAngle(d2)< Math.PI,使用midAngle(d2)> 0：

《d3.js – 如何在半圆形图表的两半上设置标签？》

在添加文本的位置进行此更改并绘制文本折线(第165,175和202行).

点赞