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

d3.js drag-and-drop force-layout
norrs picture norrs · Jun 5, 2012 · Viewed 17.7k times · Source

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.

Answer

norrs picture norrs · Jun 6, 2012

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 questions

D3 Differentiate between click and drag for an element which has a drag behavior

I am unable to successfully distinguish between the click event and the drag event on an element that is bound to both using D3.js v3. The circle in the code below is assigned a drag behaviour and also a …

Read More
Show data on mouseover of circle

I have a set of data that I am plotting in a scatter. When I mouseover one of the circles I would like it to popup with data (like x, y values, maybe more). Here is what I tried using: …

Read More
How can I remove or replace SVG content?

I have a piece of JavaScript code which creates (using D3.js) an svg element which contains a chart. I want to update the chart based on new data coming from a web service using AJAX, the problem is that …

Read More