vasturiano / 3d-force-graph

3D force-directed graph component using ThreeJS/WebGL
https://vasturiano.github.io/3d-force-graph/example/large-graph/
MIT License
4.67k stars 825 forks source link

How to show a - 1M nodes #668

Open gaianraja opened 7 months ago

gaianraja commented 7 months ago

Describe the bug Hi,

We have a large visualisation. we are trying to show 1M nodes at a time. It is showing good. But when people drag the mouse or continuous actions multiple times then it become freezes. Can you please suggest me how do I show the loading icon so that the user aware of to wait for next action.

Is it possible to divide the data into multiple groups and visualise as a pagination? I saw we can control the Camera position based on number of nodes. Are you manipulating the node while performing actions like mouse drag down and up?

How do I show loading when .graphData(gData) loaded into the browser?

Is the react-fiber-3D can be an alternate?

Can you please help us with the below URL?

https://stackblitz.com/edit/stackblitz-starters-jt7nyz?file=src%2Fapp%2Fgraph%2Fgraph.component.ts

I have attached a demo where the CPU is 99% for 1000 nodes.

image

To Reproduce Set the demo, Number of nodes = 10,00,000

Raja K

jaygray0919 commented 7 months ago

We have a similar problem and plan to use a category selector as used by LesMis examples and others. Here is our LesMiz version (originally from @vasturiano): https://afdsi.com/___tmp-4/les-mis-avec-selector/ Here is an example similar to yours: https://jsfiddle.net/EPurpl3/qoz5dj31/1/ IMHO the categories must be pre-defined; we can't walk the tree to feature all connections/paths based on a single node (too big a problem) LesMis illustrates the nearest neighbor query. I believe the EPurpl3 example was developed by Raúl Ibáñez (https://codepen.io/raulprop) @RaulPROP We'd be interested in developing a generalized solution. There is a model we might follow: https://www.gituml.com/viewz/1871 GitUML visualizes GitHub dependencies based on selecting a specific JavaScript library. /jay

gaianraja commented 7 months ago

Hi,

I am unable to launch jsfiddle. it is getting crashed.

Thanks, Raja K

jaygray0919 commented 7 months ago

Yup, it's big. We run it locally but I don't have a public link to share. However, it has provided clues (for us) about how to select a Class and all members of a Class. The GitUML approach is interesting. You identify a text structure (in this case a GitHub repo) and select an item from the class tree. GitUML then generates the nodes and relationships for the selection (i.e. identifying all dependencies in a workflow). In other words, provide a tree structure as a menu (where one could select multiple tree terms) and then generate only that part of the graph. Bottom line: don't try to initially display large models (because they require more resources than are available - e.g. the fiddle) Instead, provide a navigator with the root on top ("All") and selectors in a descending tree (where "All" cannot be selected). In the LesMis case, a selection features the "nearest neighbor". An updated version would identify all dependents/relationships for a selection.