javascript - d3 : intercepting keydown events over specific elements

Question

我想识别特定 D3 元素上发生的按键事件。以下代码片段(此处为 JSFiddle )正确识别了鼠标悬停在各个 div 上以及全局按键事件，但似乎并未触发特定于 div 的按键处理程序(目前仅在 Chrome 上进行了测试)。最简单的方法是什么:

1. 识别光标位于哪个 div/svg 上，或者
2. 将按键处理程序附加到特定的 div/svg

？

_.each(_.range(2), function (i) {
    var svg = d3.select("#plot" + i).append("svg")
        .attr("width", 100)
        .attr("height", 100);

    svg.append("rect")
        .attr("fill", "red")
        .attr("x", 0)
        .attr("y", 0)
        .attr("width", 100)
        .attr("height", 100)
        .on("mouseover", function () { console.log("mouseover", i); })
        .on("keydown", function () { console.log("div key", i); });
});

d3.select("body").on("keydown", function () { console.log("global key"); });

谢谢!

编辑

作为后续，我想我可以捕获鼠标悬停处理程序中的 div ID，并使用它来识别全局 keydown 事件中的适当 div - 但我很好奇是否有更优雅或更惯用的解决方案。

Answer 1

*哦。您的编辑正是这个解决方案。是的，这可能是最好的处理方式。 *

您可能需要使用鼠标悬停处理程序来跟踪当前获得焦点的元素，然后使用页面监听器将事件委托(delegate)给该节点。

像这样:

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

然后在你的页面处理程序中:

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