D3.js AreaChart alignment issues

Question

I'm in need of a little assistance. I have a stacked area chart in d3.js using ordinal for the x axis (and likely for the y as well but haven't implemented that yet) and while it's rendering, it's not quite right. I need to figure out how to shift the chart (not the axis) so that the left most border is lined up vertically with the first tickmark and the rightmost is even with the last tickmark.

I've tried several variations and can't seem to figure out the starting x value.

Any help would be appreciated.

My x code

var x = d3.scale.ordinal().rangeRoundBands([0, width]);
x.domain(['Dec','Jan','Feb']); // Hard coded for now

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

A js fiddle of the entire chart (with data): http://jsfiddle.net/adeaver/FRNbq/6/

Answer 1

Have you tried:

var x = d3.scale.ordinal()
    .rangePoints([0, width]);

That may be what you are looking for.

Answer 2

This also works:

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], 1, 0);