Learn D3.js

Dragging nodes

By dragging nodes the user can change the layout of a network after all the nodes are placed. You can use dragging to make a specific node stand out from the hairball, or adjust the layout of the entire chart so that its topology can be viewed from different angles.

To implement drag-and-drop behavior in D3, you need to generate a drag behavior function, which is called by the selection that will activate it. Drag behavior functions were introduced in Chapter 8, Animation and Interactivity. To configure node dragging for an active force simulation, we will need handlers for all three drag events: start, drag, and end, as follows:

const nodeDragged = d3.drag()    .on("drag", function(d) {        d.x = d3.event.x;        d.y = d3.event.y; }) ...