javascript - 如何有选择地将鼠标事件传递给底层 svg 元素

Question

我有一个散点图，带有用于放大数据的画笔层和用于鼠标悬停捕捉的 voronois，但问题是 voronoi 路径不会让点击事件落入画笔层，或者如果将画笔保持在顶部则不会'允许悬停事件落入 voronoi 层

画笔层需要点击事件

Voronoi层需要悬停事件

我应该如何进行设置，最好只使用 css

保持笔刷层在最上面:

保持 voronoi 层在顶部:

Answer 1

我在 voronoi hover 上做了这个，保持刷子在底部，但它在边缘闪烁

$("#visualization-main-container > svg > g.voronoiWrapper > path.voronoi-poly").css("pointer-events", "all");

setTimeout(function() {
    $("#visualization-main-container > svg > g.voronoiWrapper > path.voronoi-poly.voronoi-movie-id-" + d.id).css("pointer-events", "none");
}, 10);

编辑:

我最终使用热键“CTRL”在按下 voronoi 层时暂时禁用鼠标事件，它为缩放过程增加了一个额外的步骤，但更加流畅。