Select SVG elements by making a free-hand drawing around them

Question

I am working on a project where I want to draw a line around some SVG elements in order to make a selection of the objects inside the area.

Here is a screenshot of what I have right now. I have used Paint to add the line in order to make it perfectly clear what I am trying to achieve. I want to select the two rect inside the drawn circle.

I see a number of steps that has to be solved:

1. Create a path element at mousedown and record the mouse movements until mouseup
2. Close the path, in case the user didn't draw a circle
3. Find svg elements that is completely or partly inside the circle

Which approaches do you see, and do you have any recommendations on how to go about it?

I am using D3.js. This slide (by Mike Bostock, the creator of D3) might be interesting to take a look at.

Answer 1

I would go the following steps:

1. getting the aabb (or min/max box) of the freehand form,
2. finding all elements whose aabb overlaps the freeforms' one and save the in a list,
3. getting the convex hull of freehand form,
4. test if each or some of the vertices from the elements of the list lie inside the convex-hull

Depending if you test all vertices to lie inside the convex hull you can determine if the element lies fully inside the freehand drawing or just overlaps it.

Unfortunately I am not that familiar with d3.js, but just guess that it provides methods to gain convex hulls, aabbs and test points to be inside a polygon. Probably it even provides you with the ability to make aabb queries to find overlapping aabb in step 2.

good luck...