d3 轴在 pow 刻度下表现异常

d3 axes behaving strangely with a pow scale

我正在使用 d3.js 学习数据可视化,以下比例在 d3.svg.axis

中表现异常
var scaleFunc = d3.scale.pow()
    .exponent(1.6)
    .domain(d3.extent(arr, numFunc)) // numfunc returns float between 0 - 5
    .range([ ( maxPlotHeight -axes.bufferBottom ), axes.bufferTop ])

轴函数:

d3.svg.axis()
    .scale(scaleFunc)
    .orient("left")
    .ticks(5)

如果比例范围从 0 开始,它可以工作,但只有 4 个刻度,如果范围从大于 0 的任何值(如 1.2, 1.4)开始,它显示 6 个刻度,值为:.5, .0, . 5, .0, .5, .0

somewhat working y-axis image

broken y-axis image

请帮助我理解问题

来自 axis.ticks([arguments…])

上的文档

The arguments will later be passed to scale.ticks to generate tick values

pow.ticks([count])

The specified count is only a hint; the scale may return more or fewer values depending on the input domain.

这就是为什么您在调用 .ticks(5).

时没有得到预期的精确报价数的原因

一系列刻度值 .5, .0,... 很可能是因为左侧没有足够的 space 来显示整个数字。因此,您只会看到小数分隔符和小数部分,而点前面的整数部分被截掉了。尝试将所有内容向右平移,以留出更大的边距来显示刻度值。