1

D3 でhoverIntentを使用しようとしています。これで、 hoverIntent はjQuery のhover と同じように機能します。

もともと、私は次のように D3 で mouseOver イベントを作成しました。

nodes
  .on("mouseover", highlightNode)
  .on("mouseout", unhighlightNode)

ただし、"hoverIntent" (または "hover") を使用するonことはできません。これらは疑似イベントであるためです。

また、D3 セレクターは jQuery セレクターと同じように機能するように見えますが、そのようなものを実行することnodes.hover(highlightNode, unhighlightNode)はできません。「mouseenter」イベントと「mouseleave」イベントをそれぞれのハンドラーにバインドすることで置き換えることができますが、同様のhover方法で置き換える方法がわかりません。hoverIntent

hoverIntentを使用してバインドできるイベントに分解する方法はありonますか? または、D3 の選択を jQuery の選択に変換する方法はありますか?

4

1 に答える 1

0

Lars Kotthoff の提案に従って、hoverIntentハンドラーを取り付けることができました。

nodes.each (d, i) ->
  $(this).hoverIntent (-> highlightNode(d, i)), (-> unhighlightNode(d, i))

( CoffeeScriptのコード)

当然、DOM 要素ではなく、D3 要素highlightNodeを期待します。unhighlightNode選択に対するD3 のeach機能は、D3 要素 ( 内d) と DOM 要素 ( にバインド)の両方を提供しますthis。

私thisは DOM 要素を選択してそれを呼び出しhoverIntentていました。「mouseenter」と「mouseleave」のハンドラーは、既存のハンドラーhighlightNodeとunhighlightNodeそれぞれの D3 要素を呼び出す無名関数ですd。

于 2013-07-11T13:39:32.050 に答える