brush overlaps events on other elements

Question

A g container has been added to my Svg container, which has a class 'graph' - all the lines of axes, graphs, points, etc. I want to add event handlers to all these elements when the cursor hovers over them, when they are clicked, and when they leave their area. But the svg container then adds a d3.brushX() mouse area with a .on('end') handler, which overlaps the 'graph' class area and doesn't give access to their events. The question is how this can be fixed, maybe d3.brush has some property or method that allows you to look at events in depth?

I found the .filtered() method, but didn’t understand how to use it for my case.

Answer 1

you can use pointer-events to none

.brush {
pointer-events: none;

}

using filtered you can filter out the event from rest

d3.selectAll('.graph')
.filter(function() {
    return !d3.select(this).classed('brush'); // Filter out the brush area
})
.on('mouseover', function() {
    // Handle mouseover event
})
.on('click', function() {
    // Handle click event
})
.on('mouseout', function() {
    // Handle mouseout event
});