如何捕获D3力布局中的击键事件？

Question

我想回应针对力布局中节点的击键事件.我已经尝试添加我能想到的"击键","按键","键盘","键盘"的所有变体,但它们都没有发射.我的鼠标事件很好.我在d3源代码中找不到任何击键事件....有没有办法捕捉击键？

        nodes.enter().append("circle")
            .on("click", function(d) { return d.clickHandler(self); })
            .on("mouseover", function(d) { return d.mouseOverHandler(self); })
            .on("mouseout", function(d) { return d.mouseOutHandler(self); })
            .on("keyup", function(d) { 
                console.log("keypress", d3.event); // also tried "keyup", "keydown", "key"
            })
            .classed("qNode", true)
            .call(force.drag);

Answer 1

我认为这里的问题是你试图将键盘事件添加到不可聚焦的元素,尝试将keydown事件添加到可聚焦元素(在这种情况下为正文):

d3.select("body")
    .on("keydown", function() { ...

在这里你可以使用的特性d3.event,例如d3.event.keyCode,或更专业化的情况下,d3.event.altKey,d3.event.ctrlKey,d3.event.shiftKey,等.

查看KeyboardEvent文档可能也会有所帮助.

我在这里做了一个简单的键盘交互小提琴:http://jsfiddle.net/qAHC2/292/

您可以通过创建一个"选择"当前对象的变量来扩展它以将这些键盘交互应用于svg元素:

var currentObject = null;

然后在适当的鼠标事件方法中更新此当前对象引用:

.on("mouseover", function() {currentObject = this;})
.on("mouseout", function() {currentObject = null;});

现在,您可以在之前设置的键盘交互中使用此当前对象.

这是一个在行动的jsfiddle:http://jsfiddle.net/qAHC2/295/