javascript - 处理重叠 SVG 图层中的鼠标事件

Question

我正在使用 d3.js 构建 map 可视化。我正在为美国各州和县绘制填充的多边形。县的 SVG 层位于州的层之下。状态已填充，但 fill-opacity 设置为 0；填充是必需的(我认为)以捕获点击事件。

我想捕捉州级的点击事件，但我想捕捉县级的鼠标悬停事件。

但是，鼠标悬停事件由各州捕获，不会传递给各县。

有什么方法可以将事件向下传递一层或以其他方式触发县上的鼠标悬停事件吗？

Answer 1

这是一个 d3 函数，可以执行您想要的操作。

它通过暂时禁用顶层的指针事件，并手动触发下一层的鼠标事件，将事件传递给下层。

function passThruEvents(g) {
    g   .on('mousemove.passThru', passThru)
        .on('mousedown.passThru', passThru)
    ;

    function passThru(d) {
        var e = d3.event;

        var prev = this.style.pointerEvents;
        this.style.pointerEvents = 'none';

        var el = document.elementFromPoint(d3.event.x, d3.event.y);

        var e2 = document.createEvent('MouseEvent');
        e2.initMouseEvent(e.type,e.bubbles,e.cancelable,e.view, e.detail,e.screenX,e.screenY,e.clientX,e.clientY,e.ctrlKey,e.altKey,e.shiftKey,e.metaKey,e.button,e.relatedTarget);

        el.dispatchEvent(e2);

        this.style.pointerEvents = prev;
    }
}