Question

I have a working linear bar chart using D3.js, which also has time-based x axis. The bars are bound to a count attribute, while the axis is bound to a date attribute. The ticks in the axis are not lining up with the bars. Any idea how to line them both up?

Here’s the jsFiddle: http://jsfiddle.net/MmEjF/

Answer 1

This is happening because the chart has 14 bars, but 15 tick marks.

The first tick mark should be the month prior to the start of your data set.

You can fix this by pulling forward the start of xTimeDomain by one month:

xTimeDomain[0] = new Date(new Date(xTimeDomain[0]).setMonth(xTimeDomain[0].getMonth()-1));