charts - D3.js AreaChart 对齐问题

Question

我需要一点帮助。我在 d3.js 中有一个堆叠面积图，使用 x 轴的序数（也可能用于 y，但尚未实现），虽然它正在渲染，但它并不完全正确。我需要弄清楚如何移动图表（而不是轴），以便最左边的边框与第一个刻度线垂直对齐，最右边的边框与最后一个刻度线对齐。

我尝试了几种变体，但似乎无法确定起始 x 值。

任何帮助，将不胜感激。

我的x代码

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");

整个图表的js小提琴（带数据）：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

这也有效：

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