如何捕捉D3强制布局中的击键事件？

我想对我的强制布局中针对节点的按键事件做出响应。我尝试添加所有我能想到的“击键”，“按键”，“键控”，“键击”的变体，但没有一个是射击。我的鼠标事件触发得很好。我无法在d3源中找到任何击键事件....是否有一种方法来捕捉击键？如何捕捉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);

来源

2013-03-07 Gene Golovchinsky

我觉得这里的问题是你想键盘事件添加到都不可作为焦点的元素，尝试添加一个事件的聚焦元素（在这种情况下，身体）：

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

在这里你可以使用属性的d3.event，例如d3.event.keyCode，或特殊情况时，d3.event.altKey，d3.event.ctrlKey，d3.event.shiftKey等。

综观日e KeyboardEvent Documentation也可能有帮助。

我做了一个简单的拨弄键盘交互这里：http://jsfiddle.net/qAHC2/292/

您可以扩展此通过创建一个变量来“选择”当前对象应用这些键盘交互到SVG元素：

var currentObject = null;

然后更新过程中适当的鼠标事件方法，此电流对象引用：

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

现在你可以使用这个电流OBJ在早先设置的键盘交互中。

这里有这个的jsfiddle在行动：http://jsfiddle.net/qAHC2/295/

来源

2013-03-07 03:47:00 Josh

这工作得很好，但它并不在我要处理的元素让我。当击键事件发生时，如何知道光标下的哪个SVG元素？ – 2013-03-07 17:36:26

为此，我建议在你的元素上添加一个'mouseover'事件监听器，然后测试那个函数中的按键，不过我不确定这是否是一个理想的解决方案 – Josh 2013-03-07 19:00:26

这样就可以得到我的问题：如何测试对于'mouseover'事件中的按键而不重建整个事件处理基础设施？ – 2013-03-07 19:19:53

如何捕捉D3强制布局中的击键事件？

回答

相关问题