如何在 D3 轴刻度中获取数值而不是对数值？答案

【问题标题】：How can I get numeric values instead of Logarthmic values in D3 axis scale?如何在 D3 轴刻度中获取数值而不是对数值？
【发布时间】：2013-04-19 03:09:52
【问题描述】：

我尝试了以下代码，

d3.scale.log().domain([1,4]).range([h, 0]);

在轴中，我在轴值中得到的值为 1e+0, 2e+0, 3e+0, 4e+0。但我需要对数值，例如 10、100、1000、10000 ..等等......

【问题讨论】：

标签： svg angularjs d3.js nvd3.js

【解决方案1】：

将log.scale 的tickFormat 与轴tickFormat 函数结合使用。

例如。设置 1 -> 10000 对数刻度：

var s = d3.scale.log().domain([1, 10000]).range([1000, 0])

然后，设置轴：

var axis = d3.svg.axis().scale(s).tickFormat(function (d) {
        return s.tickFormat(4,d3.format(",d"))(d)
})

例子

http://jsfiddle.net/2hvxc/

我们需要 4 个刻度 - 一个对应 10 的每个幂 - 并用逗号对数字进行格式化。

在此处了解有关格式化的更多信息：
https://github.com/mbostock/d3/wiki/Formatting

在此处了解有关对数秤的更多信息：
https://github.com/mbostock/d3/wiki/Quantitative-Scales#wiki-log

和轴：
https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickSize

【讨论】：