内のタイトルSVG rectが表示されていない

Question

私はの要素をマッピングしています。これは、いくつかの要素をマッピングしていて、で表され、svgに描かれているマーカーを返しています。マーカーはsvgに正しく表示されますが、カーソルを置いたときにツールチップが表示されません。

<svg> 
    <g> 
     {this.renderLines()} 
     {this.renderMarkers()} 
    </g> 
</svg> 

そして、各マーカーのように作成され、key、x、y、color：ここ

は私のSVGが

マイsvg多かれ少なかれ、以下の構造をしている 次のようになります、およびnameはいくつかのパラメータです：

<rect key={key} 
     width='8px' 
     height='8px' 
     x={x} 
     y={y} 
     fill={color} > 
     <title>{name}</title> 
</rect> 

これ以上の情報やコードを入力する必要がある場合は、教えてください。

EDITだから、

、私は、問題がどこにあるか見つかりましたが、コードを壊すことなく、それを修正する方法がわかりません。

コンポーネントは、結局以下の構造を有する：

rectは、ズーム機能を持っているチャートのために、 d3ライブラリを介して、それに接続されているズームハンドラを取得している

<svg> 
    <g> 
     {this.renderLines()} 
     {this.renderMarkers()} 
    </g> 
    <rect /> 
</svg> 

。問題は、このrectがフォアグラウンドにあるため、マーカーのonHoverイベントが発生しないということです。

svgの上にズームペインを移動すると、問題を示すツールチップが解決されますが、マウスがマーカーの上にあるときはズームが機能しません。それが動作するにはマーカーのmouseOutが必要です。

Answer 1

さて、私はついにそれを解決しました。ここに私がやったことです：

1. はsvg
2. のrect最初の子は、それはそれぞれの `rect`レンダリングのコールバックとしてref