Jak przechwytywać zdarzenia związane z naciśnięciami klawiszy w układzie sił D3?

Question

Chciałbym odpowiedzieć na zdarzenia związane z naciśnięciem klawisza skierowane na węzły w układzie sił. Próbowałem dodać wszystkie warianty "keystroke", "keypress", "keyup", "keydown", o których mogłem pomyśleć, ale żaden z nich nie strzela. Moje zdarzenia myszy są w porządku. Nie mogłem znaleźć żadnych naciśnięć klawiszy w źródle d3 .... czy istnieje sposób na przechwytywanie naciśnięć klawiszy?

 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

myślę tu problem jest próbujesz dodać zdarzenia klawiatury do elementów, które nie są aktywowana, spróbuj dodać zdarzenie keydown do aktywowana elementu (korpus w tym przypadku):

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

tutaj można skorzystać z właściwości d3.event, na przykład d3.event.keyCode, lub dla bardziej wyspecjalizowanych przypadkach d3.event.altKey, d3.event.ctrlKey, d3.event.shiftKey, etc ..

Patrząc na th e KeyboardEvent Documentation może być również pomocny.

Zrobiłem prosty skrzypce z interakcji klawiatury tutaj: http://jsfiddle.net/qAHC2/292/

można przedłużyć ten zastosować te interakcje klawiaturowych SVG elementy tworząc zmienną „Select” bieżący obiekt:

var currentObject = null; 

Następnie zaktualizuj ten prąd odniesienia do obiektu podczas odpowiednich metod zdarzeń myszy:

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

teraz można użyć tej aktualnej OBJ itd. w interakcjach klawiatury skonfigurowanych wcześniej.

oto jsfiddle tego w akcji: http://jsfiddle.net/qAHC2/295/