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

问题描述

我正在尝试将 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 }
);

这是一个live演示

我希望缩放能够像 this

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）