D3.js D3弦图未正确渲染

我正在用我的优秀指南制作一张拉伸弦图。 但是，对于某些数据输入，渲染会出错

我在这里制作了一个演示来演示我的问题：

具体来说，在.js文件第269到281行中，我有：

var respondents = 40,
    emptyPerc = 0.4,
    emptyStroke = Math.round(respondents*emptyPerc); 
var Names = ['BEN', 'ROSE', '', '1', '2', '6', ''];
var matrix = [
[0, 0, 0, 10, 10, 0, 0] ,
[0, 0, 0, 0, 10, 10, 0] ,
[0, 0, 0, 0, 0, 0, 24] ,
[10, 0, 0, 0, 0, 0, 0] ,
[10, 10, 0, 0, 0, 0, 0] ,
[0, 10, 0, 0, 0, 0, 0] ,
[0, 0, 0, 24, 0, 0, 0] ,
];

这渲染不正确-但如果我将其更改为

var respondents = 40,
    emptyPerc = 0.4,
    emptyStroke = Math.round(respondents*emptyPerc); 
var Names = ['BEN', 'LIB', 'ROSE', '', '1', '2', '6', ''];
var matrix = [
[0, 0, 0, 0, 10, 10, 0, 0] ,
[0, 0, 0, 0, 0, 10, 0, 0] ,
[0, 0, 0, 0, 0, 10, 10, 0] ,
[0, 0, 0, 0, 0, 0, 0, 24] ,
[10, 0, 0, 0, 0, 0, 0, 0] ,
[10, 10, 10, 0, 0, 0, 0, 0] ,
[0, 0, 10, 0, 0, 0, 0, 0] ,
[0, 0, 0, 0, 24, 0, 0, 0] ,
];

---

然后它工作得很好。很明显，我看到了这两个代码块之间的差异，但为什么它们产生不同的结果，是否可以修改我的代码以适应这两个示例？

如果您检查这个不可靠的弧，您将看到您可以通过将变换上的符号从

（50,0）

更改为

（-50,0）来将其翻转到正确的位置

。然后，如果查看分配转换的代码，它是

.attr("transform", function(d, i) {
    d.pullOutSize = pullOutSize * ( d.startAngle + 0.01 > Math.PI ? -1 : 1);
    return "translate(" + d.pullOutSize + ',' + 0 + ")";
});

原文中注明“0.01表示舍入误差”。考虑到

startAngle

已经是3.13了——也就是说，非常接近Pi——看起来这是一个边缘情况，其值正好落在截止点的错误一侧。将“允许舍入误差”值更改为0.02会将圆弧放置在正确的位置，或者可以执行以下操作

d.pullOutSize = pullOutSize * ( 
    // is the start angle less than Pi?
    d.startAngle + 0.01 < Math.PI ? 1 :
    // if yes, is the end angle also less than Pi?
        d.endAngle < Math.PI ? 1 : -1 );

d.pullowsize=pullowsize*（
//起始角是否小于π？
d、 startAngle+0.01

以防止数据集中出现类似的边缘情况