Question

我正在使用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

请帮我理解问题

Answer 1

来自axis.ticks([arguments…])

上的文档

稍后会将参数传递给scale.ticks以生成tick 值

和pow.ticks([count])

指定的计数只是一个提示;规模可能会更多或更少值取决于输入域。

这就是为什么你没有得到调用.ticks(5)时预期的确切滴答数。

由于左边没有足够的空间来显示整个数字，因此最有可能导致一系列刻度值.5，.0，....因此，您将只看到小数点分隔符和小数部分，而点前面的整数部分被截断。尝试将所有内容翻译到右侧，以允许更宽的边距，以便能够显示刻度值。

d3轴表现出奇怪的功能

1 个答案: