How to give a better Y axis label / scale in d3 chart?

Question

I have a real time animated line chart.

Y axis domain will be updated every time interval based on incoming max data

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

Then I update the Y axis label as per below

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

Therefore the label will looks a bit weird due to lack of space as shown below:

Picture 1:

and also look like this

Picture 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]

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]

Answer 1

You can use the ticks(number) method on the axis to tell it to draw fewer ticks; the default is to draw approximately 10 ticks. 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.

For your case you want to use

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