d3.js - NVD3.js(d3.js)缩放比例

我想创建一个在y轴上有刻度中断的图表。我不想使用非线性标度，但是当出现数据异常时，使用标度中断可使较低的值更明显。
在nvd3或通常在d3中实现此效果的最佳方法是什么？

最佳答案

缺少其他选项，我创建了蛮力解决方案，操纵Y轴的垂直<path>。

使用伪代码，您可以像这样使用它:

var domainPath = yAxis
    .select('path.domain');

domainPath.attr('d', breakScale(domainPath.attr('d'), 14, 6, 4, 7);

breakScale函数不是很特别，也不是优雅，但是可以这样:

function breakScale(pathString, amplitude, wavelength, periods, dist){
    var parts = pathString.match(/(.*)(H-\d+)/);
    var first = parts[1];
    var last = parts[2];
    first = first.replace(/(.*?V)(\d+)/, function(match, p1, p2) { return p1 + (p2-dist-(wavelength)*periods) });

    var newPath = first;

    for(var i=0; i<periods+1; i++){
        if(i === 0){
            newPath += 'l-' + (amplitude/2) + ',' + (wavelength/2);
        }
        else if(i == periods){
            newPath += 'l' + (i%2?'':'-') + (amplitude/2) + ',' + (wavelength/2);
        }
        else {
            newPath += 'l' + (i%2?'':'-') + amplitude + ',' + wavelength;
        }
    }

    newPath += 'v' + dist + last;

    return newPath;
}

dist定义波浪物体应从轴的起点开始的距离。该函数可能对amplitude和wavelength的偶数最有效，因为它们在波的第一部分和最后一部分都减半了。 periods至少应为3。

给定一个典型的域轴路径字符串，如M-6,0H0V376H-6，它将吐回类似M-6,0H0V345l-7,3l14,6l-14,6l14,6l-7,3v7H-6的内容，如下所示:

关于d3.js - NVD3.js(d3.js)缩放比例，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20249054/