D3.js – D3 force directed graph with drag and drop support to make selected node position fixed when dropped

d3.jsdrag and dropforce-layout

Example on a force direct graph can be found here: http://bl.ocks.org/950642

How can I easily add support for drag and drop?
It should set the node to fixed with current location of where it dropped it.
It is important that rest of the nodes still uses the 'force directed mode' to position rest of the nodes in the graph automatically

https://github.com/mbostock/d3/wiki/Force-Layout

I've played around a bit without success, and wondering if anyone is able to give me a quick example on how to add such support as explained above.

Best Answer

Finally got it working after figuring out it is not ideal to fight with two "drag" listeners (your own, and force.drag) attached to the nodes!

Much better to only have your own "drag"-listener and call tick() manually which is the key feature of getting the force graph to position the nodes for you on every new node position on the node your dragging.

Working example: http://bl.ocks.org/2883411

Related Topic