CODEWITHSUNDEEP
d3.js
Tom P
Tom P

Reputation: 5659

Adding a specific tick to a D3.js axis

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

Upvotes: 10

Views: 5278

Answers (1)

Steve P
Steve P

Reputation: 19377

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.

Upvotes: 17

Related Questions