javascript - 如何绑定缩放按钮以响应 d3 树？

Question

我试图弄清楚如何绑定缩放按钮以响应 d3 树，但是我还没有找到一种在保持位置不变的情况下有效的方法。

每次我更新 zoomLevel 时位置都会重置，这意味着如果我平移某个地方并调整 zoomLevel，它会跳到树的中间。

我想要这样的东西https://jsfiddle.net/vbabenko/jcsqqu6j/9/

const TreeWrapper: FC<any> = ({ data }) => {
  const [zoomLevel, setZoomLevel] = useState(1);

  const scaleExtent = { min: 0.5, max: 3 };

  const zoomIn = () =>
    zoomLevel < scaleExtent.max &&
    setZoomLevel((prevLevel) => prevLevel + 0.25);

  const zoomOut = () =>
    zoomLevel > scaleExtent.min &&
    setZoomLevel((prevLevel) => prevLevel - 0.25);

  return (
    <Card title={null}>
      <button onClick={zoomIn} type="button">
        +
      </button>
      <button onClick={zoomOut} type="button">
        -
      </button>
      <Tree
        zoom={zoomLevel}
        scaleExtent={scaleExtent}
        translate={translate}
        zoom={zoomLevel}
        zoomable={true}
        initialDepth={1}
        collapsible={true}
        separation={{ siblings: 2, nonSiblings: 2 }}
        renderCustomNodeElement={(rd3tProps) =>
          renderForeignObjectNode({ ...rd3tProps, foreignObjectProps })
        }
        orientation="vertical"
        data={data}
      />
    </Card>
  );
};