D3 - 堆积条形图显示图表中的错误数据

Question

我这里有一个傻瓜 - https://plnkr.co/edit/7Eg34HyhXY6M3UJccAFq?p=preview

var data = [{
  day: 'Mon',
  apricots: 150,
  blueberries: 20,
  cherries: 15
}];

使用上面的数据

是一个简单的堆积条形图

堆积图表似乎显示不正确的数据

杏子似乎要到150 蓝莓看起来可能是20 15岁时最小的樱桃是最大的酒吧。

我做错了吗

Answer 1

一些小错误，在高度部分应该是：

.attr('height', (d) => {
  return   y(d[0]) - y(d[1]);
})

和y attr

.attr('y', (d) => {
  return y(d[1]);
})

，域名应为

y.domain([0, d3.max(stackedSeries, (d) => {
  return d3.max(d, (d) => {
    return d[1];
  });
})])

以下是经过修改的：Plunker