d3堆叠栏更新不起作用

Question

我有一个堆积在D3 v5中的条形图。 https://codepen.io/bental/pen/oMbrjL

我还不太了解更新模式，这些条被覆盖了。

我认为我必须抓住更新的内部区域，但是我不能完全使这项工作生效。我确定我的误解和错误在于plotArea（）函数

function plotArea() {
  const stackedData = d3.stack().keys(keys)(data);
  const layer = svg.append('g')
    .selectAll('g')
    .data(stackedData);

  layer
    .transition()
    .attr('x', (d) => graphAxes.x(d.data.interval))
    .attr('y', (d) => graphAxes.y(d[1]))
    .attr('height', (d) => graphAxes.y(d[0]) - graphAxes.y(d[1]))
    .attr('width', graphAxes.x.bandwidth());

  layer
    .enter().append('g')
    .attr('class', d => 'data-path type-' + d.key)
    .selectAll('rect')
    .data(d => d)
    .enter().append('rect')
    .attr('x', (d) => {
      return graphAxes.x(d.data.interval)
    })
    .attr('y', (d) => graphAxes.y(d[1]))
    .attr('width', graphAxes.x.bandwidth())
    .attr('height', (d) => graphAxes.y(d[0]) - graphAxes.y(d[1]));

  layer.exit()
    .transition()
    .delay(function(d, i) {
      return 30 * i;
    })
    .duration(1500)
    .attr('y', graphAxes.y(0))
    .attr('height', graphDimensions.height - graphAxes.y(0))
    .remove();
}

任何帮助表示赞赏