d3.svg.brush and mouseover event conflict

[majorye]

Hi, I apply d3.svg.brush on some element, but I want to use mouseover event
for the element in the brush area , so I could not get the mouseover event callback,
how to solve this problem ?

[majorye]

And also I use "mouseenter" event, click that element, the "mouseenter" callback invoke, looks strange 🎱

[mbostock]

I don’t think this is possible (at least, automatically). The brush needs an overlay so that it receives mousedown events to initiate brushing. This overlay is necessarily on top of any display elements, such as dots in a scatterplot. (Otherwise, the display elements would prevent the mousedown event from being received by the brush. You could put the brush underneath the display elements if you wanted this behavior, however.) And because the overlay is on top of the display elements, it also prevents mouseover events from being received by the display elements.

It might be possible for you to solve this by reordering the brush on mousedown. For example, you could initialize the brush as underneath the display elements, but when you receive a mousedown event, move the brush to the front so that it receives subsequent events for the duration of the brush gesture. But you might need to use a capturing listener on the containing group to make sure that you move the brush to the front before the display elements prevent the brush from receiving the event.

Another possibility would be to place the brush underneath the display elements permanently, and to create a synthetic mousedown event and dispatch it to the brush if the display elements are mousedowned. But I think this could be tricky to work.

A third possibility is to put the display elements on top of the brush, but to set the to pointer-events none when a capturing mousedown listener on a containing element is triggered. This should prevent the display elements from participating in pointer events while the mouse is down, but otherwise let them trigger mouseover and mouseout events. This is probably the simplest solution, but I haven’t tested it.

In either case none of these workarounds can be built into the brush automatically because it requires assumptions about the rest of the DOM (and the desired behavior).

[jwildfire]

This example from @larsenmtl takes a slightly different approach that worked for my use case.

[barry-johnson]

For those visiting in the future. I found the strategy illustrated by this Plunkr to work reasonably well. Original was from an answer to a StackOverflow question although I corrected a small bug that prevented the mouseover horizontal bar from being drawn.

The key region is to view is lines 258-280 . After creating the brush, grab its background and attach additional mouseover/move/out events to the background.

The one notable limitation as implemented is that as-is it doesn't do the mouseover magic on the area inside an active brush, however I believe. additional mouseover events could be added to the active brush region to accomplish this.