I'm using version 7.3.0 of d3 and I have based my code on this example. My problem is that when I'm zooming in (or out) the layout of the circles breaks and becomes

while initially was like this

The code that implements the zoom is

    const zoomed = d3.zoom()
      .scaleExtent([0, 3])
      .on('zoom', event => {
        graph.selectAll('g').attr('transform', event.transform);
      });

I have noticed that if I add the following line of code, then it prevents it from breaking.

    const zoomed = d3.zoom()
      .scaleExtent([0, 3])
      .on('zoom', event => {
        graph.selectAll('g').attr('transform', event.transform);

        // This line prevents zoom from breaking
        simulation.restart();
      });

But the downside is that it becomes noticeably slower. Is there a more efficient way to prevent it from breaking like that?

Any help would be appreciated. Thank you