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 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/

回答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));

来源：https://stackoverflow.com/questions/11814399/need-help-lining-up-x-axis-ticks-with-bars-in-d3-js-bar-chart