block by mbostock 444757cc9f0fde320a5f469cd36860f4

Circle Dragging III

Full Screen

This is a variant of dragging Canvas circles that uses better hit-testing. Rather than choose the top circle that contains the active pointer, this custom drag subject chooses the circle closest to the active pointer. Even better, this allows increasing the search radius for the closest circle, such that the pointer doesn’t need to be inside a circle. This is equivalent to using an SVG Voronoi overlay, and is similar to Tovi Grossman’s bubble cursor.

This implementation uses a linear scan. For force-directed layouts, see simulation.find. See also quadtree.find, though note that a quadtree will only be faster than a linear scan if you can amortize the cost of building the quadtree, such as by using quadtree.remove and quadtree.add to update the circle that is being dragged.

Updated Example →

index.html