如何解决d3.brushX覆盖SVG中graph类元素事件问题？及filtered方法用法

方法一：用Brush的filter方法精准控制事件触发 #

这是最灵活的方案，通过filter方法判断哪些事件交给Brush处理，哪些透传给下层元素。比如当鼠标在.graph容器内的元素上时，让Brush忽略该事件：

const brush = d3.brushX()
  .on('end', function(event) {
    // 你的brush结束逻辑
  })
  .filter(event => {
    // 检查触发事件的元素是否不在.graph容器内
    return !event.target.closest('.graph');
  });

// 把brush挂载到容器上
svg.append('g').attr('class', 'brush').call(brush);

原理是filter返回false时，Brush会放弃处理该事件，事件就会向下传递到.graph里的元素，触发它们的hover、click事件。

方法二：调整DOM层级 #

SVG的元素层级由添加顺序决定，后添加的元素会覆盖在先添加的元素之上。所以先添加Brush的容器，再添加.graph容器，让.graph的元素在Brush遮罩层的上方：

// 先创建Brush容器
const brushG = svg.append('g').attr('class', 'brush');
// 再创建.graph容器（此时它在Brush容器上层）
const graphG = svg.append('g').attr('class', 'graph');

// 挂载Brush
brushG.call(brush);

这样.graph里的元素能直接接收鼠标事件，Brush只能捕获到.graph元素之外区域的事件。

方法三：修改Brush遮罩层的指针事件属性 #

通过CSS限制Brush遮罩层的事件拦截范围，只让Brush的手柄和选择框响应事件，遮罩层不拦截：

/* 让Brush的遮罩层不接收鼠标事件 */
.brush .overlay {
  pointer-events: none;
}
/* 保留Brush手柄和选择框的交互能力 */
.brush .selection, .brush .handle--w, .brush .handle--e {
  pointer-events: all;
}

这个方案的缺点是用户只能通过拖动手柄或选择框来操作Brush，无法点击空白区域进行框选，适合对Brush操作方式要求不高的场景。

内容的提问来源于stack exchange，提问作者Надя