画笔叠加矩形事件与其他元素事件冲突

Question

成像我使用d3-v4.js创建条形图。

以下是简要的SVG代码段：

<svg width="400" height="300">
    <g class="brush">
        <rect class="overlay" ... ></rect>
        <rect class="selection" ... ></rect>
        <rect class="handle handle--n" ... ></rect>
        <!-- ... ...   other rect handle     ... ...  -->
    </g>
    <g class="bar">
        <rect width="200" height="20" x="0" y="0"></rect>
        <!-- ... ...   other rect bars    ... ...  -->
    </g>
</svg>

考虑到我可以与每个矩形条进行交互（例如，＃34;点击＆＃34;，＆＃34; mouseenter＆＃34;＆＃34; mouseleave＆＃34;），我做 g.bar g.brush 以上，以便 rect.overlay 不会覆盖在所有条形图上方。

只有从空白区域开始（通过 rect.overlay ）时，画笔才能正常工作。但是，当我从酒吧开始刷它不起作用。显然， rect.overlay 无法再捕获画笔事件。

在这种情况下的任何解决方案？提前谢谢！