我一直在 Nextjs 应用程序中尝试 D3 库，并尝试让缩放和平移正常工作。现在，我设法让缩放和平移正常工作。我遇到的问题是重置...

我一直在 Nextjs 应用中试用 D3 库，并尝试让缩放和平移正常工作。现在，我设法让缩放和平移正常工作。我遇到的麻烦是重置图表。

我有这个功能，单击按钮可以重置图表上的任何缩放或平移。

  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));
        };
      });
  }

我设法让这个函数工作（大部分来自文档）。我不能说我 100% 知道发生了什么。我对此实现的主要问题是图表重置到其原始位置，然而，在此之前，它会从视图中消失并从侧面浮动。我希望它无缝过渡回其原点而不消失。

有什么帮助吗？如果能提供一些材料/解释，说明 tween s 和 插值的 含义，我将不胜感激。（从 D3 文档中并没有真正理解这一点。）