I’m trying to dynamically update react-force-graph-2d, but I don’t want the graph to move like shown in the example here:

https://vasturiano.github.io/react-force-graph/example/dynamic/

Instead, I want the nodes and links to stay in a fixed position once they’re added instead of moving around. Essentially, once a node/link is added, I want it to remain in place unless the user moves the node themselves.

I’ve been able to fix the nodes to canvas using:

node.fx = node.x;
node.fy = node.y;

and have not noticed node flashing, but have not been able to fix the links to the canvas which results in a flash everytime the interval inside the useEffect hook gets called.

When the data rerenders, the links start flashing, and I’m trying to avoid this behavior. The solution used for nodes doesn’t work because link.fx and link.fy are undefined, so I’m wondering how to keep the links in place. Any help would be greatly appreciated.

 <ForceGraph2D
    ref={fgRef}
    graphData={data}
    nodeCanvasObject={
      // fix node to canvas
      node.fx = node.x;
      node.fy = node.y;
    }
    nodeCanvasObjectMode={() => "after"}
    linkCanvasObject={
        // how can I fix the links to the canvas?
    }
    linkCanvasObjectMode={() => "after"}
/>

Expected behavior Links stay fixed to canvas when updated and don't flash.