react-force-graph
react-force-graph copied to clipboard
Performance issues with 80k+ edges
Heya, I'm working on a website using react-force-graph to render an internet crawler (website here, source here). In this dataset, there are ~10k nodes and ~80k edges. The browser lags significantly with this amount of data rendered on screen (in both 2D and 3D), and I'm looking to speed it up.
I've seen a few issues about performance, but none of these tips seem to help. The lag is less in processing the force but just panning/moving the camera while they sit still (I already have some warmupTicks set). I thought it was my custom color lookup code, but commenting it out doesn't seem to make much of a difference. I'm curious if I'm doing something wrong here or if this library is just not designed for this many edges. I've made sure the entire component is not rerendering.
The graph only lags when these many nodes/links are visible. If you type notnite.com
into the search box, hit Enter, and drag the slider above it one or two notches forward, it filters to nodes with that many degrees of separation. You can notice that performance is greatly improved when doing so.
Any help or tips are appreciated. Sorry for making an issue instead of a discussion, I don't think they're enabled for this repository. Thanks!