d3.js - tooltips - ¿Cómo capturo eventos de pulsaciones en el diseño de fuerza D3?

d3js v4

Question

Me gustaría responder a los eventos de pulsaciones de teclas dirigidos a los nodos en mi diseño de fuerza. He intentado agregar todas las variantes de "pulsación de tecla", "pulsación de tecla", "pulsación de tecla", "pulsación de tecla" en las que podría pensar, pero ninguna de ellas está activada. Mis eventos de ratón se disparan bien. No pude encontrar ningún evento de pulsaciones de tecla en la fuente d3 ... ¿hay alguna forma de capturar pulsaciones de teclas?

 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

Creo que el problema aquí es que está intentando agregar eventos de teclado a elementos que no son enfocables, intente agregar un evento keydown a un elemento keydown (cuerpo en este caso):

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

Aquí puede usar las propiedades de d3.event , por ejemplo d3.event.keyCode , o para casos más especializados, d3.event.altKey , d3.event.ctrlKey , d3.event.shiftKey , etc.

Ver la documentación de KeyboardEvent también puede ser útil.

He hecho un sencillo violín con la interacción del teclado aquí: http://jsfiddle.net/qAHC2/292/

Puede extender esto para aplicar estas interacciones de teclado a elementos svg creando una variable para ''seleccionar'' el objeto actual:

var currentObject = null;

Luego actualice esta referencia de objeto actual durante los métodos de evento de mouse apropiados:

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

Ahora puede usar este objeto actual en las interacciones de su teclado configuradas anteriormente.

Aquí hay un jsfiddle de esto en acción: http://jsfiddle.net/qAHC2/295/