NVD3.js（d3.js）刻度中断

我想在y轴上创建一个刻度中断的图表。我不想使用非线性缩放比例，但使用缩放缩放时，如果数据出现异常，可以使较低的值更明显。在nvd3或一般在d3中实现它的最佳方式是什么？NVD3.js（d3.js）刻度中断

2013-11-27 sepans

你不能在NVD3做到这一点而无需修改源代码。在D3中，我会针对不同的输入范围使用不同的比例。 –

谢谢拉尔斯，我想这样做，但不知道什么是最好的方法。我应该创建一个新的比例，像linears_with_break比例吗？我试图理解D3代码，但不知道如何去做... – sepans

[本教程]（http://www.d3noob.org/2013/01/using-multiple-axes-for -d3js-graph.html）并不完全符合你的要求，但它应该让你知道如何开始。 –

缺少其他选项我创建了一个蛮力解决方案，操纵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这将是这样的：

enter image description here

来源

2014-01-20 16:05:19

NVD3.js（d3.js）刻度中断

回答

相关问题