vasturiano / react-force-graph

React component for 2D, 3D, VR and AR force directed graphs
https://vasturiano.github.io/react-force-graph/example/large-graph/
MIT License
2.16k stars 275 forks source link

ForceGraph2D canvas is corrupted after repeated zooming & panning canvas #409

Open arsdragonfly opened 1 year ago

arsdragonfly commented 1 year ago

Describe the bug ForceGraph2D canvas is corrupted after repeated zooming & panning canvas

To Reproduce sample CodeSandbox

import "./styles.css";
import { ForceGraph2D } from 'react-force-graph';

export default function App() {
  return (
    <div className="App">
      <ForceGraph2D graphData={({
        nodes: [
          {
            id: "1",
          },
          {
            id: "2",
          }
        ],
        links: [
          {
            source: "1",
            target: "2"
          }
        ]
        })} />
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Expected behavior Canvas should properly display the graph

Screenshots 2023-01-01 21-15-01屏幕截图

Additional context Just keep panning and zooming and it'll eventually happen Reproducible in both Chrome 108.0.5359.124 and webkit2gtk 2.38.3

vasturiano commented 1 year ago

When using React 18, please disable Strict mode. That's what's causing the glitch in your sandbox.