d3.on（ "mouseover"）イベントはネストされたSVG要素では機能しません

Question

私は要素のネストされたセット（SVG）を持っています。ルート要素はグラフであり、子要素はグラフの要素（線、軸など）です。簡単な例：

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

私の問題は、私はmainGraph要素に（例えばD3.on（「マウスオーバー」と））マウスオーバー/のMouseMoveイベントをバインドする場合、私は1の上にマウスを移動した場合、それが唯一のトリガーということです子要素の

私が読んだことの1つは、それ以降の要素の優先順位があるため、すべての子要素に.style（ "pointer-events"、 "none"）を追加しましたが、機能しませんでした。

Answer 1

一つのアプローチは、後から追加された要素によってキャッチされていないマウスイベントをキャッチする最初の要素として全面を埋める四角形を追加することです：

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

私は<g>要素（あなたの例ではmainGraphを）信じますマウスイベントを受け取ることができる実際の形状ではなく、単なるコンテナです。

マウスイベントリスナーをsvg要素自体に追加できますが、<g>は機能しません。

Answer 2

rect要素を使用する以外に、イベントをトリガーするにはpointer-events: all;のようなCSSプロパティを設定する必要があります。

Answer 3

私も同じ問題に直面しています。
ソリューションは、明示的にその大きさを設定した場合は動作するはずです `G`を使用して、親要素

pointer-events: stroke; 

または

pointer-events: visibleStroke;