javascript - 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);
})