d3.js：非线性图轴 [英] d3.js : non linear graph axis

问题描述

我想在轴上添加自定义比例，例如

I am trying to add a custom scale on an axis, such as below

这个想法是一个tick总是比上一个tick大2倍。

The idea is that a tick is always 2 times bigger than a previous tick.

我的理解是，这是一个自定义比例。我做了一点研究&找不到类似的东西。

My understanding is that this is a custom scale. I did a bit of research & could not find anything like it.

所以我想我的问题是两个问题：

So I guess my question is actually two questions:

$ b $

这是否可以使用 d3 .js ？

任何指向相关教程或实例的链接（即jsFiddle）也欢迎。

Any link to related tutorial or live example (ie. jsFiddle) is also welcome.

编辑：我现在问了关于mathematica.stackexchange.com的相关问题，以帮助我找到这个问题的解决方案&

I have now asked a related question on mathematica.stackexchange.com to help me find the solution to this problem & will update this post after I have tried a few things.

推荐答案

在这种情况下可以使用多线性刻度。从线性缩放API文档：

Polylinear scales can be used in this scenario. From linear scale api documentation:

虽然线性刻度在
域中通常只有两个数字值，但您可以为多线性刻度指定多个值。
在这种情况下，在
输出范围中必须有相等数量的值。多线性尺度表示分割连续域和范围的多个分段线性
尺度。

Although linear scales typically have just two numeric values in their domain, you can specify more than two values for a polylinear scale. In this case, there must be an equivalent number of values in the output range. A polylinear scale represents multiple piecewise linear scales that divide a continuous domain and range.

这里有一个符合您要求的示例：

Here's an example that fits your requirements:

// 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]);

知道蜱的数量以及域和范围的范围，两个数组的计算是（注意，它们必须等长）。

Knowing the number of ticks as well as the extents of domain and range, the computation of both arrays is trivial (note that they must be of equal length).

这篇关于d3.js：非线性图轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！