You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 afewissues 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!
The text was updated successfully, but these errors were encountered:
NotNite
changed the title
Performance issues with 80k+ links
Performance issues with 80k+ edges
Dec 25, 2023
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!
The text was updated successfully, but these errors were encountered: