Zdarzenie d3.on ("mouseover") nie działa z zagnieżdżonymi elementami SVG

Question

Mam zagnieżdżony zestaw elementów (SVG). Elementem podstawowym jest wykres, a elementy potomne są elementami wykresu (linie, oś itd.). Uproszczony przykład:

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

Moim problemem jest to, że jeśli wiążę się mouseover/mouseMove zdarzenie (z D3.on („mouseover”), na przykład) do elementu mainGraph, tylko wyzwala, jeśli przesunąć kursor nad jedną elementów potomnych.

Jedną z rzeczy, które czytam, jest to, że pierwszeństwo mają elementy późniejsze, dlatego dodałem style .style ("wskaźnik-zdarzenia", "brak") do wszystkich elementów potomnych, ale to nie zadziałało.

Answer 1

Jednym ze sposobów jest dodanie prostokąt wypełnienie całej powierzchni jako pierwszy element złapać zdarzenia myszy, które nie są objęte elementy dodane później:

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

Wierzę <g> element (mainGraph w przykładzie) jest tylko kontenerem, a nie rzeczywistym kształtem, który może odbierać zdarzenia myszy.

Być może będziesz w stanie dodać detektor zdarzeń myszy na samym elemencie SVG, ale nie sądzę, że <g> zadziała.

Answer 2

Oprócz użycia elementu rect powinien on mieć ustawioną właściwość CSS, taką jak ta pointer-events: all;, aby zdarzenia były uruchamiane.

Answer 3

Też mam te same problemy.
Rozwiązaniem jest dodać właściwość css do elementu nadrzędnego

pointer-events: stroke; 

lub

pointer-events: visibleStroke;