search

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.78k stars 832 forks source link

Node leaves graph layout when dynamically changing node size #455

Closed evanzummeren closed 3 years ago

evanzummeren commented 3 years ago

Describe the bug I'm dynamically changing the node size of a THREE.SphereGeometry. However once I do this the node does increase in size, but it also leaves the graph layout.

To Reproduce Steps to reproduce the behavior:

  1. Change value of size key on existing object in nodes array from 3 to 6
  2. Pass the entire data object to the graphData function.
  3. The node size will increase, but it will pull away from the current graph force layout. (see screencap)

Expected behavior I expect to increase the node size and to keep it part of the graph force layout.

Screenshots screencap

Desktop (please complete the following information):

vasturiano commented 3 years ago

@evanzummeren thanks for reaching out.

It's difficult to say where the issue lies without more context. Could you make a simple example that reproduces the issue on codepen?

evanzummeren commented 3 years ago

Hi @vasturiano, thanks for getting back to this so quickly and for making such a cool component! I just uploaded the code to codepen.

vasturiano commented 3 years ago

@evanzummeren I see what the issue is, you're actually replacing the whole node in your data structure, not just modifying one of its attributes. This means that the link connection to the node is lost, as the object reference no longer matches. This causes the node to break free, as you noticed.

So, the solution is to not create a new node, but instead modify it in place:

nodeData[1].size = 6;

After that, you can simply tell the graph to refresh, and re-invoke your custom nodeThreeObject method, via:

Graph.refresh();
evanzummeren commented 3 years ago

Amazing. Thank you so much @vasturiano!