[英]How to give a better Y axis label / scale in d3 chart?
I have a real time animated line chart. 我有一个实时动画折线图。
Y axis domain will be updated every time interval based on incoming max data Y轴域将根据传入的最大数据在每个时间间隔更新
y.domain([0, d3.max(data)]);
Then I update the Y axis label as per below 然后我按照以下方式更新Y轴标签
svg.selectAll("g.y.axis")
.interrupt()
.transition()
.duration(duration)
.ease("linear")
.call(y.axis = d3.svg.axis().scale(y).orient("left"));
The width of the line chart is small and I set it at 90 折线图的宽度很小,我将其设置为90
Therefore the label will looks a bit weird due to lack of space as shown below: 因此,由于空间不足,标签看起来会有些奇怪,如下所示:
Picture 1: 图片1:
and also look like this 而且看起来像这样
Picture 2: 图片2
Is there any option to scale the label better? 有什么选择可以更好地缩放标签?
Example in Picture 1 the label for interval can be updated as [0, 2, 4, 6, ... 10, 12]
instead of [0, 1, 2, 3, 4 ... 10, 11, 12]
在图1中的示例中,间隔标签可以更新为
[0, 2, 4, 6, ... 10, 12]
而不是[0, 1, 2, 3, 4 ... 10, 11, 12]
Example in Picture 2 the label for interval can be updated as [0, 4, 8, 12, ... 20, 24]
instead of [0, 2, 4, 6, 8 ... 20, 22, 24]
在图2中的示例中,间隔标签可以更新为
[0, 4, 8, 12, ... 20, 24]
而不是[0, 2, 4, 6, 8 ... 20, 22, 24]
You can use the ticks(number)
method on the axis to tell it to draw fewer ticks; 您可以使用轴上的
ticks(number)
方法来告诉它绘制更少的刻度。 the default is to draw approximately 10 ticks. 默认设置为绘制大约10个刻度。 The actual number of ticks is adjusted to get round-number intervals between tick values, which is why you were getting 12 ticks using the default behaviour.
调整了实际的刻度数,以获取刻度值之间的整数间隔,这就是为什么使用默认行为获得12个刻度的原因。
For your case you want to use 您要使用的情况
y.axis = d3.svg.axis().ticks(6).scale(y).orient("left")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.