Как записывать события нажатия клавиш в макете D3?

Я бы хотел ответить на события нажатия клавиш, направленные на узлы в моей силовой макете. Я попытался добавить все варианты "нажатия клавиш", "нажатия клавиш", "keyup", "keydown", о которых я мог думать, но никто из них не стреляет. Мои мыши события огонь просто отлично. Я не мог найти никаких событий нажатия клавиш в источнике 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);

Ответ 1

Я думаю, что проблема здесь заключается в том, что вы пытаетесь добавить события клавиатуры к элементам, которые не подвергаются фокусировке, попробуйте добавить событие keydown к фокусируемому элементу (в этом случае тело):

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

здесь вы можете использовать свойства d3.event, например d3.event.keyCode, или для более специализированных случаев d3.event.altKey, d3.event.ctrlKey, d3.event.shiftKey и т.д.

Глядя на Документацию KeyboardEvent, также может быть полезно.

Я сделал простую скрипку с клавиатурным взаимодействием здесь: 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/