Javascript D3常规更新模式：在添加新元素之前删除旧元素

我正在制作一个动画条形图。我面临的一个问题是，图表中的最后一个组元素没有整齐地过渡出来。我希望能够在数据更改时，随着新元素的出现，转换出旧的组元素。下面是我的代码：

 let group_svg_div_primary = svg_div_primary.selectAll("g").data([null]);
  group_svg_div_primary = group_svg_div_primary
    .enter()
    .append("g")
    .attr("id", "plot")
    .merge(group_svg_div_primary)
    .attr("transform", `translate(${margin.left}, ${margin.top})`);

  const groups = group_svg_div_primary
    .selectAll("g")
    .data(yearSlice, (d) => d.country);

  const groupExit = groups.exit();
  groupExit.transition(transition).remove();

  const groupsEnter = groups
    .enter()
    .append("g")
    .attr("id", "bars")
    .attr("transform", (d) => `translate(0,${innerHeight})`);
  groups
    .merge(groupsEnter)
    .transition(transition)
    .attr("transform", (d) => `translate(0,${yScale(yValue(d))})`);

  const rects = groupsEnter
    .append("rect")
    .attr("fill", (d) => colorScale(colorValue(d)))
    .attr("x", xScale(0))
    .attr("width", (d) => xScale(xValue(d)))
    .merge(groups.select("rect"))
    .attr("height", yScale.bandwidth())
    .transition(transition)
    .attr("width", (d) => xScale(xValue(d)));
  groupExit.select("rect").transition(transition);

我很确定这需要一个小小的调整。但是我完全迷路了