Javascript D3.js弦图-使弦接触拉开的弧

这里是D3和Javascript新手。我正在做一个弦图，其中一个弧被拉离中心。我已经成功地将弧线移动到我想要的位置，但我想知道如何使这组和弦再次接触弧线，而不弄乱其他组和弦的位置

这是一张图片来解释我想要的结果

我目前正在使用if语句来选择圆弧C所在的角度并平移其位置

.attr("transform", function(d) {
            if (d.startAngle > Math.PI*1/2 && d.startAngle < Math.PI*5/6) {
                            return "transform", "translate(" + pullOutSize + "," + pullOutSize + ")"}
        ;})

然而，当我对它应用相同的if语句时，translate停止工作。似乎if语句不符合条件。我想知道在if语句中加入什么样的语句才能帮助我选择我要移动的和弦部分

.attr("transform", function(d) {
            if (d.startAngle > Math.PI*1/2 && d.startAngle < Math.PI*5/6) {
                            return "transform", "translate(" + pullOutSize + "," + pullOutSize + ")"}
        ;})

.attr（“转换”，函数（d）{
if（d.startAngle>Math.PI*1/2&&d.startAngle

---

谢谢

根据文档，可以在创建弦/功能区时将半径作为参数传递

文件

身体{
字体：20px无衬线；
}
.组刻度线{
行程：#000；
}
.丝带{
填充不透明度：0.67；
}
矩阵扩展数据变量={
“居住者”：
[0, 10,10,10,10,0,0,0,10,10,10,10,10],
“地板”：
[70,0,0,0,0,0,30,0,0,0,0,0,0],
“木制品”：
[40, 0,0,0,0,0,60,0,0,0,0,0],
“天花板”：
[60, 0,0,0,0,0,40,0,0,0,0,0,0],
“湿敷产品”：
[60, 0,0,0,0,0,40,0,0,0,0,0,0],
“幕墙”：
[0, 0,0,0,0,0,100,0,0,0,0,0,0],
“环境”：
[0, 10,10,10,10,0,10,0,10,10,10,0,10],
“屋顶”：
[0, 0,0,0,0,0,80,0,0,0,0,0],
“绝缘”：
[50, 0,0,0,0,0,50,0,0,0,0,0,0],
“MEPFP”：
[40, 0,0,0,0,0,60,0,0,0,0,0,0],
“结构”：
[50, 0,0,0,0,0,50,0,0,0,0,0,0],
“家具”：
[90, 0,0,0,0,0,10,0,0,0,0,0,0]
}
矩阵=对象值（矩阵扩展数据）；
matrixKeys=Object.keys（matrixData）；
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”），
外层=数学最小值（宽度、高度）*0.5-150，
内半径=外半径-30；
var formatValue=d3.formatPrefix（“，.0”，1e3）；
var chord=d3.chord（）
.焊盘角度（0.024）
.Sortsub组（d3下降）；
var arc=d3.arc（）
.innerRadius（innerRadius）
.outerRadius（outerRadius）；
var ribbon=d3.ribbon（）；
var color=d3.scaleOrdinal（）
.域（d3.范围（4））
.范围（[“#6FCDE3”，
“#D7DAE5”，
“#D7DAE5”，
“#D7DAE5”，
“#D7DAE5”，
“#D7DAE5”，
“#e52b”，
“#D7DAE5”，
“#D7DAE5”，
“#D7DAE5”，
“#D7DAE5”，
“#D7DAE5”
]);
var g=svg.append（“g”）
.attr（“变换”、“平移”（“+width/2+”、“+height/2+”）旋转（75）”）
.基准（弦（矩阵））；
var组=g.append（“g”）
.attr（“类”、“组”）
.全选（“g”）
.data（函数（和弦）{return chords.groups；}）
.enter（）.append（“g”）；
group.append（“路径”）
.style（“fill”，函数（d）{返回颜色（d.index）；}）
.style（“笔划”，函数（d）{return d3.rgb（color（d.index））.darker（）；}）
.attr（“d”，函数（d，i）{
var半径=0；
如果（d.索引%2！=0）半径=50；
返回弧内半径（内半径+半径）
.outerRadius（outerRadius+radius）（d）；}）.on（“mouseover”，函数（d，i）{
褪色（.1，d）；
})
.on（“mouseout”，函数（d，i）{
褪色（1，d）；
});
var groupTick=group.selectAll（“.group tick”）
.data（函数（d）{返回groupTicks（d，1e3）；}）
.enter（）.append（“g”）
.attr（“类”、“组标记”）
.attr（“转换”，函数（d）{
var半径=0；
如果（d.索引%2！=0）半径=50；
返回“旋转”（+（d.angle*180/Math.PI-75）+
）平移（“+（外表面+半径）+”，2）”；
});
groupTick.append（“行”）
.attr（“x2”，6）；
群虱
.filter（函数（d）{返回d.value%5e3==0；}）
.append（“文本”）
.attr（“x”，8）
.attr（“dy”，“.35em”）
.attr（“转换”，函数（d）{返回d.angle>Math.PI/2&&d.angleMath.PI/2&&d.angle

使用与拉开圆弧完全相同的方法

.attr("transform", function(d) {
            if (d.startAngle > Math.PI*1/2 && d.startAngle < Math.PI*5/6) {
                            return "transform", "translate(" + pullOutSize + "," + pullOutSize + ")"}
        ;})

// from documentation
   var ribbon = d3.ribbon();
     ribbon({
            source: {startAngle: 0.7524114, endAngle: 1.1212972, radius: 240},
            target: {startAngle: 1.8617078, endAngle: 1.9842927, radius: 240}
     });