L'evento d3.on ("mouseover") non funziona con elementi SVG nidificati

Question

Ho un insieme di elementi nidificati (SVG). L'elemento radice è il grafico e i bambini sono elementi nel grafico (linee, assi, ecc.). esempio semplificato:

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

Il mio problema è che se mi legano un passaggio del mouse/evento MouseMove (con D3.on ("passaggio del mouse") per esempio) per l'elemento mainGraph, si innesca solo se mi muovo il mouse su una degli elementi del bambino.

Una delle cose che ho letto è che c'è la priorità degli elementi successivi, quindi ho aggiunto .style ("pointer-events", "none") a tutti gli elementi figli, ma non ha funzionato.

Answer 1

Un approccio è quello di aggiungere un rettangolo riempire tutta la superficie come il primo elemento per la cattura di eventi del mouse che non rientrano nel campo di elementi aggiunti in seguito:

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

Credo che il <g> elemento (mainGraph nel tuo esempio) è solo un contenitore, non una forma reale che può ricevere eventi del mouse.

Potrebbe essere possibile aggiungere il listener di eventi del mouse sull'elemento svg stesso, ma non penso che il <g> funzionerà.

Answer 2

Oltre all'utilizzo di un elemento rect, è necessario impostare una proprietà CSS come questa pointer-events: all; per gli eventi da attivare.

Answer 3

Ho anche gli stessi problemi.
La soluzione è quella di aggiungere la proprietà CSS per elemento padre

pointer-events: stroke; 

o

pointer-events: visibleStroke;