如何在d3图表中给出更好的Y轴标签/比例？

Question

我有一个实时动画线图。

Y轴域将根据传入的最大数据

在每个时间间隔更新

y.domain([0, d3.max(data)]);

然后我按照下面的

更新Y轴标签

svg.selectAll("g.y.axis")
.interrupt()
.transition()
.duration(duration)
.ease("linear")
.call(y.axis = d3.svg.axis().scale(y).orient("left"));

折线图的宽度很小，我将其设置为 90

因此，由于空间不足，标签看起来有点奇怪，如下所示：

图片1：

也看起来像这样

图片2：

有没有更好的缩放标签的选项？

图片1 中的示例区间标签可以更新为[0, 2, 4, 6, ... 10, 12]而不是[0, 1, 2, 3, 4 ... 10, 11, 12]

图片2 中的示例区间标签可以更新为[0, 4, 8, 12, ... 20, 24]而不是[0, 2, 4, 6, 8 ... 20, 22, 24]

Answer 1

您可以在轴上使用ticks(number)方法告诉它绘制更少的刻度;默认是绘制大约10个刻度。调整实际的刻度数以获得刻度值之间的整数间隔，这就是使用默认行为获得12个刻度的原因。

对于您的情况，您想要使用

y.axis = d3.svg.axis().ticks(6).scale(y).orient("left")