d3.js - 如何在半圆环图的两半上设置标签？

Question

我正在制作一个半圆形 donut chart ，目前看起来像这样: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];
        };
    });

但是，到目前为止，我在测试中尝试实现的每个解决方案都以失败告终。如果您知道如何实现此效果，请告诉我!

Answer 1

而不是使用 midAngle(d2) < Math.PI , 使用 midAngle(d2) > 0 :



在添加文本并绘制​​文本多段线(第 165、175 和 202 行)的位置进行此更改。