EDIT from last gist: Trying to disable mouse-events on the points while a click is detected (the third solution suggested in #1604). It almost works, but takes two clicks to brush when clicking on a point (one to disable the mouse-events on the point, the second click finally gets sent to the brush).
old text follows
Trying to get point hover-interaction and brushing to exist. I have found some existing precedence (bug #1604) for this being a weird problem, particular in relation to how D3’s brush is implemented. Previous solutions have suggested drawing points on top and passing the event along to the brush, but this does not handle the case where the brush extent needs to be persistent (in the bigger picture, the scatterplot is linked to other components).
As implemented above, the brush draws fine and information can be recovered from points on hover. However, if the brush is started, dragged, or resized with the mouse starting on a point, strange behavior occurs (e.g. trying to translate an extent by clicking on a point will cause the extent to resize instead).
Here’s what I’ve got: in brushstart() defined in D3.js (line 9192), there are two targets of interest: this (which is the element that brush is called on), and eventTarget (the actual element that was clicked). For the different operations (dragging, resizing, and “redrawing”), this should be the parent brush element (in this case, the svg element), and eventTarget should be the child element that was actually clicked (rect.extent for translating the extent, rect with datum for resizing, and rect.background for redrawing/canceling).
I can’t seem to set the eventTarget property within brushstart() appropriately. Any ideas?