javascript - arc - d3js mouseover

El evento d3.on("mouseover") no funciona con elementos SVG anidados

Question

Tengo un conjunto anidado de elementos (SVG). El elemento raíz es el gráfico y los elementos secundarios en el gráfico (líneas, ejes, etc.). Ejemplo simplificado:

<g transform="translate(80,10)" id="mainGraph">
<g class="Line">
<path d="....."></path>
</g>
</g>

Mi problema es que si enlazo un evento mouseover / mousemove (con D3.on ("mouseover") por ejemplo) al elemento mainGraph, solo se desencadena si muevo el mouse sobre uno de los elementos secundarios.

Una de las cosas que leí es que hay prioridad de los elementos posteriores, así que agregué .style ("pointer-events", "none") a todos los elementos secundarios, pero eso no funcionó.

Answer 1

Además de usar un elemento rect , debe tener un conjunto de propiedades CSS como este pointer-events: all; para los eventos que se desencadenarán

Answer 2

También me enfrento a los mismos problemas.
La solución es agregar la propiedad css al elemento padre

pointer-events: stroke;

o

pointer-events: visibleStroke;

Answer 3

Un enfoque es agregar un rectángulo que llena toda la superficie como el primer elemento para capturar los eventos del mouse que no son atrapados por los elementos añadidos más adelante:

something.append(''svg:rect'')
.attr(''width'', width) // the whole width of g/svg
.attr(''height'', height) // the whole heigh of g/svg
.attr(''fill'', ''none'')
.attr(''pointer-events'', ''all'')
.on(''mouseover'', function() {
// do something
}
});

Creo que el elemento <g> (mainGraph en tu ejemplo) es solo un contenedor, no una forma real que puede recibir eventos del mouse.

Es posible que pueda agregar el detector de eventos del mouse en el elemento svg, pero no creo que el <g> funcione.