Force Dragging III
This example shows a force-directed graph rendered with Canvas, where nodes represent characters from *Les Misérables* and links show their co-occurrence in Victor Hugo’s novel. The graph is computed using d3-force, with node colors mapped by group through an ordinal color scale. Dragging a node with the mouse fixes it to the pointer while the simulation’s alpha target is raised to 0.3, heating up the layout for smoother interaction; releasing the node unfixes it and returns the alpha target to zero. The visualization demonstrates how d3-drag can be combined with d3-force in a canvas-based rendering, with nodes and links redrawn on every tick for responsive, interactive exploration of the network.
AI-generated descriptionThis example demonstrates applying d3-drag to a force-directed graph computed using d3-force. When the drag gesture starts, the targeted node is fixed to the pointer; it is released when the gesture ends. In addition, the simulation is temporarily “heated” during interaction by setting the target alpha to a non-zero value.
Compare to the SVG version.
forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048'>Force Dragging III</a>