7

この例に従って、次のようなコードを使用して d3.js に HTML ツールチップを実装しました。

function onmouseover(d) {
    $("#tooltip").fadeOut(100,function () {
        // generate tooltip
        $("#tooltip").fadeIn(100);
    });
}

function onmouseout() {
    $("#tooltip").fadeOut(250);
}

動作しますが、マウスが複数のノード上ですばやく移動すると、ツールチップがページ上でスタックしたままになるという動作が見られます。上記の例は、同じ動作を示しています (うれしそうに揺れています!)。

いくつかの調査を行った結果、nvd3はこの問題をdispatchを使用して見事に解決したようです。ただし、ディスパッチがどのように機能するかについてはよくわかりません。この質問に基づいて、この場合はより簡単なアプローチがあると思います。

アップデート

この問題は、fadeIn と fadeOut が原因でのみ発生します。これらがゼロに設定されていれば、問題はありません。したがって、問題は、別のマウスオーバー/アウト イベントがある場合にフェードイン/アウトが中断されるように設定できるかどうかです。

解像度

問題は、ツールチップが 1 つしかなかったことです。これは、JQuery フェードアウトの途中でイベントに応答できませんでした。答えは、複数のツールチップを用意して、古いツールチップがフェードアウトしている間に 1 つがフェードインできるようにすることです。これは、次の 2 つの方法で実現できます。

  • JQuery フェードアウト
  • CSS トランジション ( NVD3で使用されるアプローチ)
4

1 に答える 1

4

NVD3 の解決策は、いずれかのノードでマウスアウト イベントが発生するたびにクリーンアップ メソッドを実行することです。こちらの 78 行目のソースを参照してください: https://github.com/novus/nvd3/blob/master/src/tooltip.js。これを介して行う必要はありませんd3.dispatch。直接行うこともできます。

また、イベントを確実にキャッチするために提案されたいくつかの回避策を調べることもできmouseoutます:なぜマウスアウト イベントを確実にキャプチャできないのですか?

于 2012-08-18T15:44:48.273 に答える