Handling Mouse Events in Overlapping SVG Layers

Question

I am building a map visualization with d3.js. I am drawing filled polygons for both the US states and counties. The SVG layer for counties is under the layer for states. The states are filled, but fill-opacity is set to 0; the fill is required (I think) to catch click events.

I want to catch click events at the state level, but I want to catch mouseover events at the county level.

However, the mouseover event is captured by the states and not passed through to the counties.

Is there any way to pass the event down a layer or otherwise trigger the mouseover event on the county?

Answer 1

Here's a d3 function which does what you want.

It passes events to lower layers by temporarily disabling pointer events on the top layer, and manually triggering the mouse event on the next layer.

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