标记d3森伯斯特图表

Question

我正在尝试标记d3旭日形图。对于每个弧切片，一条线从其中心向外延伸（以相同的方向/角度）。

我这样做

el.append('svg:line')
        .attr('x1',function(d){ return self.arc.centroid(d)[0] })
        .attr('y1',function(d){ return self.arc.centroid(d)[1] })
        .attr('x2',function(d){
            let angle = (self.arc.endAngle()(d) - self.arc.startAngle()(d))*(180/Math.PI);
            let [cx,cy] = self.arc.centroid(d);
            let radius = self.arc.outerRadius()(d);
            return cx + radius*Math.sin(angle);
        })
.attr('y2',function(d){
            let angle = (self.arc.endAngle()(d) - self.arc.startAngle()(d))*(180/Math.PI);
            let [cx,cy] = self.arc.centroid(d);
            let radius = self.arc.outerRadius()(d);
            return cy + radius*Math.cos(angle);
        })

我的角度计算可能有误，但我不确定为什么每条线都是均匀的。

  

我希望线条向外延伸，而你可以看到它们向右延伸。

我见过饼图示例，其中我们有外弧。这在这里不起作用，因为在旭日图表中，我可能在同一个角度上有多个切片。

https://codepen.io/metalsushi/pen/KXzXOw这是一个包含示例代码的codepen。