如何捕获D3力布局中的按键事件？ [英] How do I capture keystroke events in D3 force layout?

问题描述

我想响应指向我力量布局中的节点的击键事件。我试过添加所有的变种，keystroke，keypress，keyup，keydown，我可以想到，但没有一个发射。我的鼠标事件火就好了。我在d3源中找不到任何按键事件....是否有一种方法来捕获关键笔划？

 节点.com（mouseover，function（）; function（）;）; $。 d）{return d.mouseOverHandler（self）;}）
 .on（mouseout，function（d）{return d.mouseOutHandler（self）;}）
。 function（d）{
 console.log（keypress，d3.event）; //也尝试了keyup，keydown，key
}）
 .classed qNode，true）
 .call（force.drag）; 
  

解决方案

我认为这里的问题是你试图添加键盘事件到不可聚焦的元素，请尝试向可聚焦元素（此例中的正文）添加 keydown 事件：

  d3.select（body）
 .on（keydown，function（）{... 
  / pre> 
 
 
这里你可以使用 d3.event 的属性，例如 d3。 event.keyCode ，或者对于更特殊的情况， d3.event.altKey ， d3.event.ctrlKey ， d3.event.shiftKey 等。
 
 
 
查看 KeyboardEvent文档也可能有帮助。
 
 
 
我' ve在这里提供了一个简单的键盘交互操作： 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/ 
 
I would like to respond to keystroke events directed at nodes in my force layout. I've tried adding all the variants of "keystroke", "keypress", "keyup", "keydown" that I could think of, but none of them is firing. My mouse events fire just fine. I couldn't find any keystroke events in the d3 source.... is there a way to capture key strokes?
        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);

解决方案
I think the problem here is you are trying to add keyboard events to elements that are not focusable, try adding a keydown event to a focusable element (body in this case):
d3.select("body")
    .on("keydown", function() { ...
here you can use properties of d3.event, for instance d3.event.keyCode, or for more specialized cases, d3.event.altKey, d3.event.ctrlKey, d3.event.shiftKey, etc..

Looking at the KeyboardEvent Documentation might be helpful as well.

I've made a simple fiddle with keyboard interaction here: http://jsfiddle.net/qAHC2/292/

You can extend this to apply these keyboard interactions to svg elements by creating a variable to 'select' the current object:
var currentObject = null;
Then update this current object reference during appropriate mouse event methods:
.on("mouseover", function() {currentObject = this;})
.on("mouseout", function() {currentObject = null;});
Now you can use this current object in your keyboard interactions set up earlier.

here's a jsfiddle of this in action: http://jsfiddle.net/qAHC2/295/

                        
这篇关于如何捕获D3力布局中的按键事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！