Adding a specific tick to a D3.js axis

Question

I've created an axis with d3.svg.axis and a time scale and am happy with the ticks produced by the tick generator. However, I would like to ensure that a particular value is always marked. So for example the if the generator produces the following dates

2000-1-1, 2001-1-1, 2002-1-1, 2003-1-1

I might want to make the axis show

2000-1-1, 2000-7-21, 2001-1-1, 2002-1-1, 2003-1-1

How do i get an array of the ticks made by the tick generator so that I can add my value and pass it into the tickValues function?

I could create a second axis, style it to remove the domain path and pass any additional dates to that ones tickValues function but that seems a bit awkward.

Or am I going about this in the wrong way?

Thanks

Answer 1

Once you've set up your scale & axis, you can call ticks() with no parameters to get the values that it has generated:

ticks = myScale.ticks();

And then you can push/splice/whatever:

ticks.push(some_new_value):

And then pass them back into tickValues

myAxis.tickValues(ticks);

Do all this before you .call this axis to add it to the SVG, of course.