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