graph annotation - draggable clusters
This example demonstrates how to dynamically update graph annotations on a network diagram. Three groups of nodes in the network are highlighted with encircling callout circles that carry labels. The visualization uses D3.js v4, the d3-annotation library, and d3.forceSimulation for physics-based layout, with a node-dragging interaction. The underlying data is a character network from *Les Misérables*, provided in a `graph.json` file. The annotations' positions and circle radii are recalculated during the simulation's tick, and the annotation subjects are made non-interactive to allow dragging of the nodes beneath.
AI-generated descriptionMade with d3.annotation. An example showing how you can dynamically update the annotations on tick with a network graph.
this iteration that makes the nodes underneath the annotation circles draggable too 🖱🎉
svg.selectAll('.annotation-subject')
.style('pointer-events', 'none');
an iteration on the block d3-annotation: Encircling Example from @DataToViz
now with support for touch events 🎉
d3.select('body')
.on('touchstart', noZoom)
.on('touchmove', noZoom)
function noZoom() {
d3.event.preventDefault();
}
thanks to @autiomaa for pointing out that touch support was missing before 😄
further reading on Event.preventDefault() the at the MDN docs and the w3c spec
forked from <a href='http://bl.ocks.org/micahstubbs/'>micahstubbs</a>'s block: <a href='http://bl.ocks.org/micahstubbs/f32a742947f259d12eb999d418a767fb'>graph annotation - draggable clusters</a>