画笔与其他元素上的事件重叠

Question

一个 g 容器已添加到我的 Svg 容器中，该容器具有一个“图形”类 - 所有轴、图形、点等的线。我想在光标悬停在所有这些元素上时向它们添加事件处理程序，当当他们离开自己的区域时，他们会被点击。但是 svg 容器随后添加一个带有 .on('end') 处理程序的 d3.brushX() 鼠标区域，该处理程序与 'graph' 类区域重叠，并且无法访问其事件。问题是如何解决这个问题，也许 d3.brush 有一些属性或方法可以让您深入查看事件？

我找到了 .filtered() 方法，但不明白如何在我的案例中使用它。

Answer 1

您可以使用指向无的指针事件

.brush {
pointer-events: none;

}

使用过滤，您可以从休息中过滤掉事件

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
});