ホバリングの前に<path>をつけてください（他の要素によって隠されている場合）

たとえば、マサチューセッツ州を網羅しているドットも部分的にニューハンプシャーをカバーしていますが、ニューハンプシャー州の覆われた部分にマウスをかざすと、ニューハンプシャーが引き出されます。

これをどのように達成したとしますか？ドットは、DOMでの順序に基づいて状態のアウトラインの前にあります。基本的な形を引き起こすマウスオーバーを聞いて、すべてのものの上に2番目の状態のアウトラインがあるかもしれないと思ったが、それはそうではないようだ。

私が取り組んでいるアプリケーションで同様の機能を実装する必要があり、SVG要素でうまくいく方法が不思議です。

ありがとうございました。そのNYTのグラフィックで

2012-12-04 Al R.

これは見た目ほど複雑ではありません。あなたのドットに 'pointer-events：none;'のcssプロパティを与えてください。これにより、マウスが存在していることを知ることができなくなるため、その背後にあるものにカーソルを合わせることができます – Andy

これは素晴らしいです。ありがとう –

はい。唯一のことは、IEがこのCSSの小道具をサポートしていないことです。 IE9でも。 @stackoverflow.com/questions/5855135/css-pointer-events-property-alternative-for-ie – meetamit

As noted Andyによって円がなしのCSSポインタ・イベントの性質を持っている：

circle { 
    pointer-events: none; 
}

フロント行動にもたらすがthis methodを使用してマウスオーバー機能で達成することができます。

stateShape.on("mouseover",function(){this.parentNode.appendChild(this);})

2013-07-11 22:28:25 Yanofsky

答えて