search

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.17k stars 277 forks source link

Links are not updating correctly #488

Open sivarasan-sph opened 8 months ago

sivarasan-sph commented 8 months ago

Describe the bug When using ForceGraph3D from the react-force-graph library in a React application, I encounter an issue with dynamically updating the graph. Initially, the graph renders correctly with data fetched from Firebase. However, problems arise when attempting to update the graphData object with new data. After adding new entries to the graphData, particularly to the links array, the ForceGraph3D component fails to render the updated graph and produces an error. This suggests an issue with how the new data is formatted or merged into the existing graph data.

Additional Context:

The issue seems to specifically involve the formatting or integration of new data into the links array of the graphData object. The initial rendering with Firebase data works seamlessly, but the graph fails to update correctly with subsequent additions of new data.

To Reproduce Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Add any other context about the problem here. [

Screenshot 2024-01-23 at 12 56 49 PM

](url)

vasturiano commented 7 months ago

@sivarasan-sph thanks for reaching out.

It's difficult to say without more context, so if you still need more dedicated help it's better if you create a simple example with your issue.

It looks like in this case you are updating the source/target attributes with timestamps instead of node links or ids?

Another thing you can try is using different source/target attribute names, via the linkSource/linkTarget props, so that it doesn't conflict with the inner attributes of the component.

Nek97 commented 7 months ago

@vasturiano unfortunately i'm having a similar issue, please let me know if for you is better have 2 different issues, but it's happening on a 2D Graph.

I have a button to hide a node, (with all the nodes and all the links no more needed), but as i update the list of nodes and links, other links will disappear. I double checked the list of nodes and links and it appear absolutely perfect. As i show again the deleted node, so i put it back with all the needed links and nodes, also the other links will be showed again.

Dragging a "detached" node i see the link is still working, so it seems to be only a visualization problem.

It happens not only on "large" set of data, but it can happen also in a graph with more of less 10 nodes and links.

I'm using: Browser: google chrome version 121.0.6167.139 (Official Build) (64-bit) Os: Ubuntu 22.04.3 LTS

vasturiano commented 7 months ago

@Nek97 could you please create a simple repro example? It's difficult to diagnose this without deeper context into your data structure changes.

Jimflip commented 7 months ago

Also having this issue!