Javascript D3带连接器的圆环图

我试图创建一个静态d3圆环图，其中包含来自json对象的标签和连接器。我已经能够让它在这个数组中工作，但无法让连接器或标签文本与我需要的数据对象一起显示

甜甜圈图表正在运行，标签与百分比一起显示，但我需要它们与标签和连接器一起显示。我认为这与我试图映射连接器的方式有关，但无法找出错误

代码如下，这里还有一个指向工作小提琴的链接：

风险值数据=[{
百分比：19，
标签：“咨询”
},{
百分比：3，
标签：“消费品”
},{
百分比：5，
标签：“能源/化学/气体”
},{
百分比：3，
标签：“创业”
},{
百分比：1，
标签：“环境与可持续性”
},{
百分比：19，
标签：“金融服务”
},{
百分比：3，
标签：“综合管理”
},{
百分比：6，
标签：“政府”
},{
百分比：7，
标签：“医院/卫生保健/卫生服务”
},{
百分比：2，
标签：“人力资源”
},{
百分比：4，
标签：它是
},{
百分比：2，
标签：“国际发展”
},{
百分比：3，
标签：“制造/运营”
},{
百分比：4，
标签：“营销/公关/广告”
},{
百分比：1，
标签：“媒体/体育/娱乐”
},{
百分比：7，
标签：“非营利/教育/特殊组织”
},{
百分比：6，
标签：“其他”
},{
百分比：2，
标签：“研发”
},{
百分比：4，
标签：“销售/业务发展”
},];
可变宽度=300，
高度=300，
半径=数学最小值（宽度、高度）/2；
var color=d3.scale.ordinal（）
.范围（[“#243668”、“#2b7eb4”、“#186b97”、“#6391a1”、“#d2c5b7”、“#9c9286”、“#5B59”）；
var pie=d3.layout.pie（）
.sort（空）
.value（函数（d）{返回d.percentage；}）；
var arc=d3.svg.arc（）
.内半径（半径-100）
.外层（半径-50）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var path=svg.selectAll（“路径”）
.数据（pie（数据））
.enter（）.append（“路径”）
.attr（“fill”，函数（d，i）{返回颜色（i）；}）
.attr（“d”，弧）；
svg.selectAll（“文本”）.data（饼图（数据））
.输入（）
.append（“文本”）
.attr（“文本锚定”、“中间”）
.attr（“x”，函数（d）{
var a=d.startAngle+（d.endAngle-d.startAngle）/2-Math.PI/2；
d、 cx=数学cos（a）*（半径-75）；
返回d.x=数学cos（a）*（半径-20）；
})
.attr（“y”，函数（d）{
var a=d.startAngle+（d.endAngle-d.startAngle）/2-Math.PI/2；
d、 cy=数学sin（a）*（半径-75）；
返回d.y=数学sin（a）*（半径-20）；
})
.text（函数（d）{返回d.value；}）
.每个功能（d）{
var bbox=this.getBBox（）；
d、 sx=d.x-bbox.width/2-2；
d、 ox=d.x+bbox.width/2+2；
d、 sy=d.oy=d.y+5；
});
svg.append（“defs”）.append（“marker”）
.attr（“id”、“circ”）
.attr（“markerWidth”，6）
.attr（“markerHeight”，6）
.attr（“参考文献”，3）
.attr（“参考文献”，第3页）
.附加（“圆圈”）
.attr（“cx”，3）
.attr（“cy”，3）
.attr（“r”，3）；
svg.selectAll（“path.pointer”）.data（饼图（数据））.enter（）
.append（“路径”）
.attr（“类”、“指针”）
.style（“填充”、“无”）
.style（“笔划”、“黑色”）
.attr（“标记结束”、“url（#circ）”）
.attr（“d”，函数（d）{
如果（d.cx>d.ox）{
返回“M”+d.sx+”、“+d.sy+”L”+d.ox+”、“+d.oy+”、“+d.cx+”、“+d.cy”；
}否则{
返回“M”+d.ox+，“+d.oy+”L“+d.sx+”，“+d.sy+”，“+d.cx+”，“+d.cy”；
}
});

将数据保存到变量中：

var pieData = pie(data);

并在此处使用此变量：

svg.selectAll("text").data(pieData)
    .enter()
    .append("text")
    .attr("text-anchor", "middle")
    .attr("x", function(d) {
        var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
        d.cx = Math.cos(a) * (radius - 75);
        return d.x = Math.cos(a) * (radius - 20);
    })
    .attr("y", function(d) {
        var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
        d.cy = Math.sin(a) * (radius - 75);
        return d.y = Math.sin(a) * (radius - 20);
    })
    .text(function(d) { return d.value; })
    .each(function(d) { // !!! you extent the dataset here 
        var bbox = this.getBBox();
        d.sx = d.x - bbox.width/2 - 2;
        d.ox = d.x + bbox.width/2 + 2;
        d.sy = d.oy = d.y + 5;
    });

在这里：

svg.selectAll("path.pointer").data(pieData).enter()
    .append("path")
    .attr("class", "pointer")
...

这很重要，因为您扩展了数据（请参见

每个
方法）。您将使用扩展属性计算连接器位置，并且两种情况下应使用相同的数据集

检查。
我正要发布同样的内容。：）
svg.selectAll("path.pointer").data(pieData).enter()
    .append("path")
    .attr("class", "pointer")
...