Is it possible to use hoverIntent with D3.js?

Question

I am trying to use hoverIntent with D3. Now, hoverIntent works just like jQuery's hover.

Originally, I created mouseOver-events in D3 like this:

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

However, using "hoverIntent" (or "hover") in on is not possible, because they are pseudo-events.

And while D3 selectors seem to act just like jQuery selectors, executing something like nodes.hover(highlightNode, unhighlightNode) is not possible. It is possible to replace hover by binding "mouseenter" and "mouseleave" events to the respective handlers, but I do not see how to replace hoverIntent in a similar fashion.

Is there a way to do decompose hoverIntent into events that can be bound using on? Or is there a way to convert D3 selections into jQuery selections?

Answer 1

Following the suggestion by Lars Kotthoff, I was able to attach the hoverIntent handler.

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

(code in CoffeeScript)

Naturally, highlightNode and unhighlightNode expect D3 elements, not the DOM element. D3's each function on selections provides both, the D3 elelent (in d) as well as the DOM element (bound to this).

I use this to select the DOM element and call hoverIntent on it. The handlers for "mouseenter" and "mouseleave" are anonymous functions that call the existing handlers highlightNode and unhighlightNode with the respective D3 elements d.