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.66k stars 821 forks source link

when I click one node and drag it and hold it not release the mouse, why the other nodes are keep moving #279

Open zp1112 opened 4 years ago

zp1112 commented 4 years ago

when I click one node and drag it and hold it not release the mouse, why the other nodes are keep moving

Alexithemia commented 4 years ago

It's part of the library, there a force pushing everything away from each other to make room while the engine is turned on (which happens during dragging). This doesn't affect as much when nodes are linked together, but random floating nodes will move.

I made a small pulling center force to pull everything towards the center for my issue, as well as gave them a force collide to space them.

.d3Force('collide', d3.forceCollide(Radius))
.d3Force('x', d3.forceX(0).strength(0.1))
.d3Force('y', d3.forceY(0).strength(0.1))
.d3Force('z', d3.forceZ(0).strength(0.1))

That worked best for me, but as everyone's use case for this library is different you will need to play around with forces to get what you like.

You could also see about locking nodes in position after the force engine stops, but then they won't react to other nodes moving near them etc.

zp1112 commented 4 years ago

It's part of the library, there a force pushing everything away from each other to make room while the engine is turned on (which happens during dragging). This doesn't affect as much when nodes are linked together, but random floating nodes will move.

I made a small pulling center force to pull everything towards the center for my issue, as well as gave them a force collide to space them.

.d3Force('collide', d3.forceCollide(Radius))
.d3Force('x', d3.forceX(0).strength(0.1))
.d3Force('y', d3.forceY(0).strength(0.1))
.d3Force('z', d3.forceZ(0).strength(0.1))

That worked best for me, but as everyone's use case for this library is different you will need to play around with forces to get what you like.

You could also see about locking nodes in position after the force engine stops, but then they won't react to other nodes moving near them etc.

thanks for answer,but I want to know how to stop this,I click one node and hold it without draging, but it still make the other nodes keep moving.

Alexithemia commented 4 years ago

Sort of addressed in my issue #232

Simply this happens because dragging the node reheats the force engine and the engine will not turn off until you release the node. Like I said above you would need to tweak or remove forces to make this not happen, but that will also affect the layout of the graph caused by forces etc. You will need to mess around with them to see what works best for you.

Three forces are included with the graph by default: 'link' (based on forceLink), 'charge' (based on forceManyBody) and 'center' (based on forceCenter).

charge is likely what is causing them to continually move away. Look into removing that and just using collide in my example above.

zp1112 commented 4 years ago

Sort of addressed in my issue #232

Simply this happens because dragging the node reheats the force engine and the engine will not turn off until you release the node. Like I said above you would need to tweak or remove forces to make this not happen, but that will also affect the layout of the graph caused by forces etc. You will need to mess around with them to see what works best for you.

Three forces are included with the graph by default: 'link' (based on forceLink), 'charge' (based on forceManyBody) and 'center' (based on forceCenter).

charge is likely what is causing them to continually move away. Look into removing that and just using collide in my example above.

I tried to remove the charge and just using collide in your example above,but it's not working for me,I just hope to stop reheat force simulation.

Alexithemia commented 4 years ago

The issue may be center then.

Make sure you are nullifying the forces like this.

myGraph
  .d3Force('charge', null)

or
myGraph
  .d3Force('center', null)
vasturiano commented 4 years ago

@zp1112 you can also try deactivating the force engine for the duration of the drag, so that the other nodes don't move. For example by doing:

myGraph.onNodeDrag(() => myGraph.cooldownTicks(0))

This will set the number of ticks in the force engine to 0, effectively disabling it, whenever a node is dragged.

At the end of the drag you should activate it again for future operations, like so:

myGraph.onNodeDragEnd(() => myGraph.cooldownTicks(Infinity))

Infinity is the default but you can also set it to a different value if you wish.

HananoshikaYomaru commented 11 months ago

to be honest, I think this should be the default