D3: Intercepting Keydown Events Over Specific Elements

I want to identify key press events which occur over specific D3 elements. The following snippet (JSFiddle here) correctly identifies mousing over individual divs, and global key

Solution 1:

*D'oh. Your edit had exactly this solution. Yup, that's probably the best way to handle it. *

You might need to use the mouseover handler to keep track of the element that is currently focused, and then use the page listener to delegate the event to that node.

something like this:

var focused = null;
svg.append("rect").on("mouseover", function () { focused = this; })

And then in your page-handler:

d3.select("body").on("keydown", function () { d3.select(focused); /* then do something with it here */ });

Solution 2:

you can also use d3.event.stopPropagation() to keep events from bubbling up to the body.