Issues with animating multiple pie charts

Hi StackOverflow Community,

I'm trying to animate multiple pies (inspired by this post) based on the dropdown value. However, am facing these issues with the pies whenever the dropdown value changes:

1. the existing pies do not update (reposition, resize or re-slice).
2. the new pie (on year 2004) does not enter nor exit smoothly.

I want to understand what it is that I've missed to include. Does anyone know of any way to solve the above challenges?
Here is the notebook that I've been working on.

You need to have an update/exit/enter selection for the groups, then another update/exit/enter selection for the paths.

In short, this is how the groups' selections looks like:

let pies = g.selectAll("g.pie_ts")
  .data(data);

pies
  .exit()
  // .transition(transition_duration)
  .remove();

pies = pies
  .enter()
  .append("g")
  .attr("class", "pie_ts")
  .property("inner_radius", function(_d) {
    return 0.3 * resize_radius(_d.total_slice);
  })
  .property("outer_radius", function(_d) {
    return resize_radius(_d.total_slice);
  })
  .property("x_value", function(_d) {
    return _d[parameter_x];
  })
  .property("y_value", function(_d) {
    return _d[parameter_y];
  })
  .merge(pies);

And this is the paths' selections:

let piesArc = pies.selectAll(".pie_ts_slice")
  .data(d => {
    let array = pie([d.total_slice_disposal, d.total_slice_diverted]);
    return array;
  })

piesArc.exit().remove();

piesArc = piesArc.enter()
  .append("path")
  .attr("class", "pie_ts_slice")
  .merge(piesArc)
  .attr("transform", function(_d) {
    let x_value = d3.select(this.parentNode).property("x_value");
    let y_value = d3.select(this.parentNode).property("y_value");
    return `translate(${x_scale(x_value)}, ${y_scale(y_value)})`;
  })
  .attr("d", function(_d) {
    let inner_radius = d3.select(this.parentNode).property("inner_radius");
    let outer_radius = d3.select(this.parentNode).property("outer_radius");
    arc
      .innerRadius(inner_radius)
      .outerRadius(outer_radius);
    return arc(_d)
  })
  .attr("fill", function(_d, _i) {
    return color[_i];
  });