d3.on ("mouseover") घटना नेस्टेड एसवीजी तत्वों

Question

के साथ काम नहीं करती है मेरे पास तत्वों का एक घोंसला सेट (एसवीजी) है। मूल तत्व ग्राफ है, और बच्चे ग्राफ (रेखाएं, अक्ष, आदि) में तत्व हैं। सरलीकृत उदाहरण:

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

मेरे समस्या यह है कि अगर मैं mainGraph तत्व के लिए माउसओवर/MouseMove घटना बाँध (उदाहरण के लिए D3.on ("माउसओवर") के साथ), यह केवल चलाता है अगर मैं एक से अधिक माउस ले जाते है बाल तत्वों का।

मैंने जो कुछ पढ़ा है, उनमें से एक यह है कि बाद के तत्वों की प्राथमिकता है, इसलिए मैंने सभी बाल तत्वों के लिए स्टाइल ("पॉइंटर-इवेंट्स", "कोई नहीं") जोड़ा, लेकिन यह काम नहीं किया।

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

मैं (अपने उदाहरण में mainGraph) का मानना ​​है <g> तत्व:

Answer 1

एक दृष्टिकोण पहला तत्व के रूप में पूरी सतह भरने माउस घटनाओं कि बाद में जोड़ा तत्वों द्वारा पकड़ा नहीं कर रहे हैं पकड़ने के लिए एक आयत को जोड़ने के लिए है सिर्फ एक कंटेनर है, वास्तविक आकार नहीं है जो माउस ईवेंट प्राप्त कर सकता है।

आप शायद svg तत्व पर माउस इवेंट श्रोता जोड़ सकते हैं, लेकिन मुझे नहीं लगता कि <g> काम करेगा।

Answer 2

rect तत्व का उपयोग करने के अलावा, इसे ट्रिगर होने के लिए इस pointer-events: all; की तरह एक सीएसएस प्रॉपर्टी सेट होना चाहिए।

Answer 3

मुझे भी एक ही समस्या का सामना करना पड़ता है।
समाधान पेरेंट तत्व

pointer-events: stroke; 

या

pointer-events: visibleStroke;