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
请帮助我理解问题
上的文档
The arguments will later be passed to scale.ticks to generate tick
values
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 来显示整个数字。因此,您只会看到小数分隔符和小数部分,而点前面的整数部分被截掉了。尝试将所有内容向右平移,以留出更大的边距来显示刻度值。
我正在使用 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
请帮助我理解问题
The arguments will later be passed to scale.ticks to generate tick values
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 来显示整个数字。因此,您只会看到小数分隔符和小数部分,而点前面的整数部分被截掉了。尝试将所有内容向右平移,以留出更大的边距来显示刻度值。