NVD3.js（d3.js）缩放

Question

我想创建一个在y轴上具有缩放比例的图表。我不想使用非线性比例但使用缩放中断使得较低的值在数据异常时更加明显。 在nvd3或一般在d3中实现它的最佳方法是什么？

Answer 1

缺乏其他选项我创建了一个强力解决方案，操纵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那样吐出类似这样的内容：