block by couchand 6420534

Better force layout node selection

Full Screen

Object selection is tough, particularly when the things you’d like to select are moving around (like nodes in a force-directed layout, perhaps). Allowing a user the fudge factor of an area cursor helps, but can get in the way when targets are small enough. The use of a Voronoi tessellation promises a map of closest node for any given point.

This example illustrates the use of a Voronoi overlay to clip nodes in a force-directed simulation. By using the Voronoi shapes as the clipping path the nodes themselves can be drawn much simpler.

This builds on these two examples from Mike Bostock on force-directed graphs and voronoi tesselation, as well as Nate Vack’s Voronoi selection example here and this first pass at an integration from Christopher Manning.

index.html

miserables.json