Question

使用Nadieh Bremer的出色指导，我正在制作一个拉伸的和弦图。但是，对于某些数据输入，渲染会出错。

我已经制作了一个演示来在这里演示我的问题： 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 );

防止数据集中出现类似情况。

D3和弦图无法正确渲染

1 个答案: