d3 堆积条形图 - 从 y0 开始，而不是 yMax

Question

我有这个堆积条形图： http://jsfiddle.net/maneesha/n7eLLnrm/2/

问题在于，看起来堆叠从 yMax 开始并下降，而不是在 y0 上升。

当我在每个系列（年份）中具有相同的计数（人数）时，这不是问题并且起初并不明显。现在几年来有更多的人，我意识到有些不对劲。我在哪里解决这个问题？

我的代码中一些可能相关的部分：

yScale = d3.scale.linear()
    .domain([0, yMax])
    .range([height, 0]),

//////

rects = groups.selectAll('rect')
    .data(function (d) {
        return d;
        })
    .enter()
    .append('rect')
    .attr('x', function (d) {
        return xScale(d.x);
        })
    .attr('y', function (d) {
        return height - yScale(d.y0);
        })
    .attr('height', function (d) {
        return height - yScale(d.y);

        })
    .attr('width', function (d) {

        return xScale.rangeBand();
        })

Answer 1

更改代码：

.attr('y', function (d) {
  return height - yScale(d.y0);
})
.attr('height', function (d) {
  return height - yScale(d.y);
})

转至以下代码：

.attr('y', function (d) {
  return yScale(d.y0 + d.y);
})
.attr('height', function (d) {
  return yScale(d.y0) - yScale(d.y0 + d.y);
})