d3.js:非线性图轴

Question

我想在轴上添加自定义比例,如下图所示

这个想法是,刻度总是比前一刻度大2倍.

我的理解是这是一个自定义的规模.我做了一些研究,找不到类似的东西.

所以我想我的问题实际上是两个问题:

1. 这个尺度在数学世界中是"标准的"吗？

2. 这有可能实现这个d3.js吗？

任何指向相关教程或实例(即jsFiddle)的链接也是受欢迎的.

编辑:我现在已经在mathematica.stackexchange.com上询问了一个相关的问题,以帮助我找到解决这个问题的方法,并在我尝试了一些事情后更新这篇文章.

Answer 1

在这种情况下可以使用多线性标度.从线性规模api文档:

虽然线性比例通常在其域中只有两个数值,但您可以为多线性比例指定两个以上的值.在这种情况下,输出范围中必须有相同数量的值.多线性标度表示分割连续域和范围的多个分段线性标度.

这是一个符合您要求的示例:

// Your custom scale:
var customScale = d3.scale.linear()
        .domain([125,250,500,1000,2000])
        .range([0,50,100,150,200]);

// The axis uses the above scale and the same domain:
var axis = d3.svg.axis()
        .scale(customScale)
        .tickValues([125,250,500,1000,2000]);

知道了滴答数以及域和范围的范围,两个数组的计算都是微不足道的(注意它们必须具有相同的长度).