D3JS中的自定义轴功能答案

【问题标题】：Custom axis function in D3JSD3JS中的自定义轴功能
【发布时间】：2013-07-08 10:12:13
【问题描述】：

我正在使用 D3JS，我想要一个 x 轴，其值如下：125、250、500、1000 ... 直到 8000。所以每次乘以我的值。

所以我尝试了 Quantize Scales 但轴不支持它。

我该怎么做？我可以做一个自定义数学函数，比如 y = mx + b（在我的情况下 m = 2，b = 0）并在轴上使用它吗？

在这里你可以看到我的code

Podelo

【问题讨论】：

你想要一个实际的刻度来做这个还是只是轴标签？
比例尺更好，因为我在 x 轴上的点必须遵循相同的逻辑
那你就得实现自己的规模了。
我们怎样才能做到这一点？有例子吗？
例如linear scale。

标签： javascript d3.js

【解决方案1】：

linear scale 非常灵活，如果您将范围和域的多个值集中在一起以创建多线性比例：

tickWidth = (ChartWidth - padding)/7
xScale = d3.scale.linear()
           .domain([0, 125, 250, 500, 1000, 2000, 4000, 8000])
           .range(d3.range(8).map(function(d){ return d*tickWidth; }));

http://jsfiddle.net/h2juD/6/

【讨论】：

非常感谢！我知道有一个技巧，但我不能完全控制 d3 函数，比如 range 和其他函数。