web-dev-qa-db-fra.com

Comment capturer des événements de frappe dans la disposition forcée D3?

Je voudrais répondre aux événements de frappe dirigés vers les nœuds dans ma disposition de force. J'ai essayé d'ajouter toutes les variantes de "frappe", "pression de touche", "keyup", "keydown" auxquelles je pouvais penser, mais aucune ne se déclenche. Les événements de ma souris se déclenchent très bien. Je n'ai trouvé aucun événement de frappe dans la source d3 .... existe-t-il un moyen de capturer les frappes de touches?

        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);
d3.jsforce-layout
23
Gene Golovchinsky

Je pense que le problème ici est que vous essayez d'ajouter des événements de clavier à des éléments qui ne sont pas focalisables, essayez d'ajouter un événement keydown à un élément focalisable (corps dans ce cas):

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

ici, vous pouvez utiliser les propriétés de d3.event, par exemple d3.event.keyCode, ou pour des cas plus spécialisés, d3.event.altKey, d3.event.ctrlKey, d3.event.shiftKey, etc..

La consultation de Documentation KeyboardEvent pourrait également être utile.

J'ai fait un simple violon avec interaction clavier ici: http://jsfiddle.net/qAHC2/292/

Vous pouvez l'étendre pour appliquer ces interactions clavier aux éléments svg en créant une variable pour "sélectionner" l'objet actuel:

var currentObject = null;

Mettez ensuite à jour cette référence d'objet actuelle pendant les méthodes d'événement de souris appropriées:

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

Vous pouvez maintenant utiliser cet objet actuel dans vos interactions clavier configurées précédemment.

voici un jsfiddle de ceci en action: http://jsfiddle.net/qAHC2/295/

61
Josh