How to Change Position of One Element in a Bubble Chart

I'm trying to implement a bubble chart in D3.js with an interaction: selecting one bubble causes it to move to the center of the chart, increase size, and display additional information.

d3-hierarchy has the d3.pack layout, which works well for making bubble charts. I can update the data to increase the size of a circle in the selection. However, I don't see any way to set the position of a circle in the layout and get the other circles to arrange themselves around it. I'd need something like "given the circle at (x, y), create a bubble chart around it", and that doesn't exist in d3.pack.

d3-force can also be used to make bubble charts. If I add in some interaction similar to this example using d3.drag, I can make a circle move towards the center like so:

function dragstarted(event) {
    const interX = d3.interpolate(event.x, dimensions.width / 2);
    const interY = d3.interpolate(event.y, dimensions.height / 2);

    if (!event.active) simulation.alphaTarget(0.3).restart();

    (function toCenter(i) {
      setTimeout(function() {
        event.subject.fx = interX(i / 100);
        event.subject.fy = interY(i / 100);

        i++;
        if (i < 100) {
          toCenter(i);
        } else {
          event.subject.fx = null;
          event.subject.fy = null;
        }
      }, 1)
    })(1);
  }

This only kind of works - it moves the circle to the center, but it runs the force through a few ticks so the circle might not actually end up at the center of the chart. Also, unlike updating data, I don't know how to reset the circles to their original positions when a user wants to dismiss the expanded circle.

My question is, how do I get a circle in a bubble chart to move to the center and have the other circles rearrange themselves? Is there some change I can make to d3.pack or d3.force that would work, or should I be trying a different approach? Another library, even?