block by mbostock ec10387f24c1fad2acac3bc11eb218a5

Circle Dragging IV

Full Screen

This is a variant of dragging SVG circles that uses better hit-testing. Rather than choose the top circle that contains the active pointer, this chooses the circle closest to the active pointer using a Voronoi overlay. This is similar to Tovi Grossman’s bubble cursor. (See also earlier D3 3.x examples by Andrew Couch, Christopher Manning and Nate Vack.)

The Voronoi diagram is shown with a light-gray stroke for demonstration purposes (and because it looks cool!); in real usage, you probably wouldn’t show it. You can refine this technique by clipping the Voronoi cells to a larger circle that surrounds the smaller draggable circles, or by performing a distance check in side drag.subject.

Compare this technique to searching for closest circle using Canvas.

Updated Example →