d3.on ("mouseover") olayı iç içe geçmiş SVG öğeleriyle çalışmaz

Question

İç içe geçmiş öğeler kümem var (SVG). Kök öğesi grafiktir ve çocuklar grafikteki öğelerdir (çizgi, eksen vb.). Basitleştirilmiş örnek:

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

Sorunum mainGraph elemana (örneğin D3.on ("fare") ile) mouseover/mousemove olay bağlamak eğer ben bir üzerine fareyi hareket, sadece tetikler olmasıdır Çocuk elemanlarının

Okuduğum şeylerden biri, daha sonraki öğelerin önceliği olduğu için, tüm alt öğelere .style ("işaretçi-olaylar", "yok") ekledim, ancak çalışmadı.

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

I (sizin örnekte mainGraph) <g> eleman inanıyoruz:

Answer 1

Bir yaklaşım sonradan eklenen unsurlar tarafından yakalanmış değil fare olaylarını yakalamak için ilk unsur olarak tüm yüzeyi dolduran bir dikdörtgen eklemektir sadece bir kaptır, fare olaylarını alabilen gerçek bir şekil değildir.

Fare olay dinleyicisini svg öğesinin kendisine ekleyebiliyor olabilirsiniz, ancak <g>'un çalışacağını düşünmüyorum.

Answer 2

rect öğesinin kullanılması dışında, olayların tetiklenmesi için bu gibi bir CSS özelliğinin pointer-events: all; olması gerekir.

Answer 3

Aynı sorunlarla karşılaşıyorum.
çözüm açıkça boyutlarını ayarlarsanız çalışmalıdır `g` kullanarak üst öğesine

pointer-events: stroke; 

veya

pointer-events: visibleStroke;