How to drag-to-select (e.g. box selection, or lasso selection)?

[nicogreenarry]

I want to build these two features:

1. User can drag a box to select data points
2. User can draw a lasso (free-form line) to select data points

What's the best way to do these?

I can imagine ways to build them from scratch using some of Visx's tools, but maybe there are easier ways?

E.g.: for box select: Use Drag to track the cursor's movement, and draw a semitransparent rect from the start to the end point of their drag. When they release, manually calculate which points are inside that region, and change their point appearance to indicate visually that they're selected.

And for lasso select, use something like in the Drag II example to draw the lasso.

• Also render a straight line segment from the start to the end of the drag, so the lasso is always a closed shape
• Maybe fill in area inside the lasso? Maybe using a Polygon, supplying it the points from the line.
• Look up some algorithm/library for calculating which points fall within an arbitrary polygon

But if there are built-in tools for doing some of the things I anticipate doing manually, I'd love to know about them.