javascript - 反应-d3| 缩放功能有问题

Question

我正在尝试将 D3 与 React 一起使用。react-d3-library 虽然很旧，但效果很好。但是有一个问题：缩放功能的工作方式很奇怪......

我正在集成这样的组件：

function Globe({ onClick }) {
  const [count, setCount] = useState(0);
  const node = getNode();
  const click = () => {
    onClick(getCountry);
    setCount(0);
  };
  useEffect(() => {
    setTimeout(() => setCount(count + 1), 1);
  });
  return (
    <div className="globe" onClick={() => click()}>
      <RD3Component data={node} />
    </div>
  );
}
export default Globe;

在 App.js 中：

export default function App() {
  return (
    <div className="App">
      <Globe onClick={(e) => onGlobeClick(e)} />
    </div>
  );
}

放大 D3 非常标准：

g.call(
  d3
    .zoom()
    .scaleExtent([0.9, 10])
    .on(
      "zoom",
      (event) => {
        g.attr("transform", event.transform);
      },
      () => null,
      { passive: true }
    ),
  { passive: true }
);

这是一个现场演示

我期待缩放能够像这样工作

PS（我已经精简了我的代码版本，我还使用从/向 d3.js 组件获取和发送数据）