25

我想响应针对我的力布局中节点的击键事件。我已经尝试添加我能想到的所有“keystroke”、“keypress”、“keyup”、“keydown”的变体，但它们都没有触发。我的鼠标事件触发得很好。我在 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);
4

1 回答 1

67

我认为这里的问题是您正在尝试将键盘事件添加到不可聚焦的元素，尝试将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/

于 2013-03-07T03:47:00.487 回答