NVD3.js（d3.js）缩放 [英] NVD3.js (d3.js) Scale Break

问题描述

我想创建一个在y轴上有缩放的图表。我不想使用非线性刻度，但使用刻度中断使更低的值在有数据异常时更加明显。

I want to create a chart with scale break on y axis. I don't want to use a non-linear scale but using a scale break make lower values more visible when having data anomalies. What is the best way to implement that in nvd3 or in general in d3?

推荐答案

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

Lacking other options I created a brute force solution, manipulating the vertical <path> of the Y axis.

使用伪代码，你使用它像这样：

Using pseudo code, you use it like this:

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

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

breakScale函数不是很特别也不优雅，但在这里它是：

The breakScale function is not very special nor elegant, but here it goes:

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 从波浪的东西应该开始的轴的起点的距离。对于振幅和波长的偶数，函数可能效果最好，因为它们对于第一个和最后一个部分海浪。 periods 应至少为3。

dist defines the distance from the start of the axis that the wavy thing should begin. The function probably works best with even numbers for amplitude and wavelength because they are both halved for the first and last part of the wave. periodsshould be at least 3.

给定一个典型的域轴路径字符串，如 M -6,0H0V376H-6 ，它会吐出像 M-6,0H0V345l-7,3l14,6l-14,6l14,6l-7,3v7H-6 ，其格式如下：

Given a typical domain axis path string like M-6,0H0V376H-6, it will spit back something like M-6,0H0V345l-7,3l14,6l-14,6l14,6l-7,3v7H-6 which would look like this:

这篇关于NVD3.js（d3.js）缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！