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

Accepted Answer

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.

Adding a specific tick to a D3.js axis

Solution

Problem