Javascript SVG线路出弧起始位置-d3.js

我正在努力做到这一点

但这就是我目前拥有的 基本上，我所需要做的就是找出如何从圆弧起点开始的圆发出直线

我的问题就是，如何将弧的起始位置转换为svg行的x1，y1属性。以下是我目前掌握的有关绘制线条的代码：

// Draw lines emanating out
g.append('line')
    .attr('class', 'outer-line')
    .attr('x1', function(d) {
        return 0;
    })
    .attr('x2', 0)
    .attr('y1', -radius)
    .attr('y2', -radius-150)
    .attr('stroke', function(d, i) {
        return color(i); 
    })
    .attr('stroke-width','2')
    .attr("transform", function(d) {
        return "rotate(" + (d.startAngle+d.endAngle)/2 * (180/Math.PI) + ")";
    });

---

如果我正确理解您的问题，您可以只使用

d.startAngle

：

g.attr("transform", function(d) {
    return "rotate(" + d.startAngle * (180/Math.PI) + ")";
});

请在此查看一个示例（单击“运行代码段”）：

var数据集=[30020040020030010050]；
可变宽度=460，
高度=300，
半径=数学最小值（宽度、高度）/2；
var color=d3.scale.category20（）；
var pie=d3.layout.pie（）
.sort（空）；
var arc=d3.svg.arc（）
.内半径（半径-100）
.外层（半径-50）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var path=svg.selectAll（“路径”）
.数据（饼图（数据集））
.enter（）.append（“路径”）
.attr（“fill”，函数（d，i）{返回颜色（i）；}）
.attr（“d”，弧）；
var g=svg.selectAll（“.groups”）
.数据（饼图（数据集））
.输入（）
.附加（“g”）；
g、 追加（'行'）
.attr（'class'，'outer line'）
.attr（'x1'，0）
.attr（'x2'，0）
.attr（'y1'，半径+50）
.attr（'y2'，-半径）
.attr（'笔划'，'黑色'）
.attr（'笔划宽度'，'2'）
.attr（“转换”，函数（d）{
返回“rotate（“+d.startAngle*（180/Math.PI）+”）；
});
这些线难道不能从中心点出来吗？马上！应该意识到是变换属性决定了圆弧的位置，谢谢！