如何在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")