4

ここでは比較的新しいコーダー。D3とjqueryを使用して、カーソルがsvg円上を移動したときにトリガーされるホップアップ効果を作成しています。

円の例は次のようになります。

<circle cx="20.61855670103093" cy="730" class="top1000 Ragtime albumDot" id="0" r="5.5"></circle>

サークルに影響を与えるCSSは次のとおりです。

.albumDot {
  fill: #fff;
  z-index: 250;
  cursor: pointer; /*-- Does not work 90% of the time --*/
  stroke: #111;
  stroke-width: 3px;
  opacity: 1;
}

ホバーを処理するコードは次のようになります。

$('.albumDot').mouseenter(function() {
   console.log("mouseover"+ this.id); 
   hopup(jazzdata[this.id]);      
});
$(".albumDot").mouseleave( function() {
   console.log("mouseout"); 
   d3.select("#hopup").attr("style","display:none; opacity:0;");
}

ホバー機能は問題なく機能しますが、これらのsvgシェイプのいずれかの上にマウスを移動すると、mouseenterとmouseleaveが何度もトリガーされます。私は形を離れるのではなく、その中で動くだけです。

以前は、mouseoverとmouseoffを使用していましたが、同じ問題が発生しました。円には子要素はありません。

これは、MacのSafariとChromeで発生します。

編集：これはドロップボックスの実例です。

http://dl.dropbox.com/u/2272508/jazz_history/index.html

4

1 に答える 1

3

DOM に<svg id="HopupTriangle">は、使用されていないように見える要素があります。この要素は、ホップアップが表示されるとすぐにドットの上に表示され、マウスからフォーカスを奪います。与えるだけdisplay:noneで問題は解決します。ですので、不要な方は手放してください。

どうしても必要な場合は、矢じりを入れる予定だと思いますが、点と重ならないようにする必要があります。まず、この要素に を付けて、background-color:#f00その位置がはっきりとわかるようにしてから、その高さを位置に調整します。

最後に、この要素がドットに重なる必要がある場合は、それに CSS プロパティを追加しますpointer-events:none。これにより、ブラウザはマウス イベントを無視します。残念ながら、このプロパティは IE では機能しません。知る限り、この問題に対する簡単な回避策はありません。IE ブラウザーでこの要素を常に非表示にすることで適切に機能を低下させる以外にはありません。

于 2012-11-29T18:54:15.517 に答える