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）刻度中斷

回答

相關問題