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

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

1 个答案: