D3和弦图绘制不正确

Question

使用纳迪赫·布雷默的优秀指南，我正在制作一个拉长的和弦图。但是，对于某些数据输入，呈现会出错。

我做了一个演示，在这里演示我的问题：https://codepen.io/benmayocode/pen/MPEwdr

具体来说，在.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] ,
];

那就好用了。我很明显地看到了这两个代码块之间的区别，但是它们为什么产生不同的结果，并且是否可以修改我的代码以适应这两个示例？

Answer 1

如果您检查这个不可靠的弧线，您将看到您可以通过更改从(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 );

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