d3.js general update pattern for stacked bar chart

Question

I am making a stacked bar chart in d3.js and have the following code which currently works for what I need:

    const stackedData = d3.stack().keys(keys)
    const layers = stackedData(this.data)

    let time = this.chart.selectAll('.time').data(layers);

    // removes time from the DOM
    time.exit().remove();

    // adds time to the DOM
    this.chart.append("g")
      .selectAll("g")
      .data(layers)
      .join("g")
      .style("fill", (d, i) => colors[i])
      .selectAll('.time')
      .data(d => d)
      .enter().append('rect')
        .attr('class', 'time')
        .attr('x', d => this.xScale(d.data.date))
        .attr('y', d => this.yScale(0))
        .attr("width", this.xScale.bandwidth())
        .attr('height', 0)
        .transition()
        .delay((d, i) => i * 10)
        .attr('y', d => this.yScale(d[1]))
        .attr('height', d => this.yScale(d[0]) - this.yScale(d[1]))

However, I am unsure on what the general update pattern should be to update the shapes already present in the DOM on refresh. for a standard (non-stacked) chart, it would be as follows, however these does not work for a stacked chart:

// update existing time
this.chart.selectAll('.time').transition()
  .attr('x', d => this.xScale(d.date))
  .attr('y', d => this.yScale(d.revenue))
  .attr('width', this.xScale.bandwidth())
  .attr('height', d => this.graphHeight - this.yScale(d.revenue))
  .attr("fill", "#007bff")