d3js set tickValues for time scale axis

Question

I've searched in the official d3.js documentation, as well as, here in stackoverflow to find a way to add custom tickValues to a time scale axis; However, i haven't stumble across any documentation that confirms that something like that is possible.

So in essence, i have a time scale axis and i would like to show specific hours eg i'd like to do something like this :

xHourAxis
   .ticks(d3.time.hours, 2)
   .tickFormat(d3.time.format('%I %p'))
   .tickValues(2, 4, 6, 8, 10, 12) ;

So i want to display tick values every 2 hours, but not including the first (12 am) and the last (12 pm).

Does anyone know if there is any workaround for that?

Answer 1

Nearly there, but your code has two problems: First the tick values must be specified in an array, and second those values should be Javascript date objects. ie you just provide an array of dates to tickValues so your code would looks something like this:

xHourAxis
 .tickFormat(d3.time.format('%I %p'))
 .tickValues([new Date(2000,10,5), new Date(2005,2,7), new Date(2007,11,11)]);

Also, note that you needn't call the ticks() if you are going to later specify custom values.