D3 Axis ticks by Week of Year

1
votes

I am trying to create a D3 chart where I want the ticks to be by Week of Year

I would like to generate ticks like so Week 01 2016, Week 02 2016 etc

My data has only timestamps that are the beginning of the week for example 6 of Jan 2014 that is Week 01.

The problem is:

The D3 auto generation of ticks will generate a tick like 8 of January 2016 that If formatted will be Week 01 2016 but the data point is 6 of January 2016 and so the point will appear before the tick with the same format and it will create confusion to my users.

Do I have to implement/override the tickValues so I have only ticks that are dates that are always the first day of the week or is there some option I can pass to D3 so the auto generation of ticks that this into account?

1
d3.js

1 Answers

3
votes

Assuming you have a d3 axis timeAxis, with a time scale, then you should be able to call

timeAxis.ticks(d3.time.week, 1)

which means "a tick every 1 week". d3 assumes Sunday is the beginning of the week, which might be just fine.

Alternatively, there's also something called "xdayOfTheYear" which I haven't tried before, but might work even better for you. See the documentation

timeAxis.ticks(d3.time.mondayOfYear)