将d3标签放在弧的末端

Question

给定以下快速拨号，它是使用D3中的弧构建的：

segmentArc = d3.svg.arc().outerRadius(radius - chartInset).innerRadius(radius - chartInset - barWidth).startAngle(arcStartRad + startPadRad).endAngle(arcEndRad - endPadRad);

如何移动每个片段中的标签，使其显示为右对齐（在每个片段的末尾与中心相对）？

目前添加的标签如下：

        chart.append('text')
            .attr('transform', () => {

                var x = Math.round(segmentArc.centroid()[0]);
                var y = Math.round(segmentArc.centroid()[1]);

                return 'translate(' + x + ',' + y + ')';

            })
            .style("text-anchor", "middle")
            .text(sectionLabel);

Answer 1

我通过复制每个段弧来解决这个问题，给它一个透明填充并使它完全两倍。从那里开始就像制作透明圆弧的质心一样简单。