Smooth out the transition

I’ve been trying out the D3 library in a Nextjs app and I am trying to get the zoom and pan working. Now, I’ve somehow managed to get the zoom and pan working. What I’m having trouble with is resetting the chart.

I have this function for a button click that is supposed to reset any zoom or pan on a chart.

  function handleClick() {
    var selection = d3.select(svgRef.current).select(".toZoom");

    selection
      .transition()
      .duration(750)
      .tween("attr.transform", () => {
        var i = d3.interpolateString(
          "scale(1, 1)" + `translate(0,${height - margin.bottom})`,
          "scale(1, 1) translate(0,0)",
        );
        return (t) => {
          selection.attr("transform", i(t));
        };
      });
  }

I managed to get this function to work(most of it is from the docs). Can’t say I know 100% what is going on.
The main problem I have with this implementation is that the chart resets to its original position, however, before doing so, it disappears from the view and floats in from the side.I would like it to seamlessly transition back to its origin without disappearing.

Any help ? Would also appreciate some materials/explanation what tweens and interpolation means in this context.(Did not really understand it from the D3 docs.