javascript - d3.js 中对数刻度的奇怪行为

Question

我这里有一个 2 个尺度的散点图。用户可以通过每个轴的单选按钮来决定他需要线性还是对数刻度。 y 轴的默认刻度是 log，x 轴的默认刻度是 linear。这非常有效。我得到一个漂亮的图表，每个轴上有 7 个值，y 轴上的值从 1 到 1000000。 我对 y 轴使用以下代码:

d3.scaleLog()
           .domain([1, 9535511.8])
           .range([that.height, 1])

对于 x 轴:

d3.scaleLinear()
           .domain([1, 119.05])
           .range([1, that.width]);

因为 x 轴是线性的。

现在，当我将 x 的 scale 更改为单选按钮上的 change 事件时，它的行为很奇怪。它仍然有效，但我得到一个丑陋的轴，数字 1 到 10 直到轴的一半，然后 20 到 100 直到结束。在更改方法上，我正在做这样的事情:

var xLg = d3.scaleLog()
                .domain([1, 119.05])
                .range([1, that.width]);
var xAxisLog = d3.axisBottom(xLg)
                .ticks(5)
                .tickFormat(function(d){ return d; });
d3.selectAll("g.axisX").transition().duration(100).call(xAxisLog);

• 在 d3 中这样做有什么不对吗？
• 有什么方法可以解决这个问题吗？

Answer 1

正如 Mike Bostock 所说 here ，给定的刻度数是 d3.ticks 使用的准则，不保证生成的刻度数组的长度相同。

尝试设置:.ticks(10)