Need Help Lining Up X Axis Ticks With Bars In D3.js Bar Chart

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

Solution 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] = newDate(newDate(xTimeDomain[0]).setMonth(xTimeDomain[0].getMonth()-1));