Как зафиксировать события нажатия клавиш в принудительной раскладке D3?

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

d3.js force-layout
person Gene Golovchinsky    schedule 07.03.2013    source источник

Ответы (1)


arrow_upward
66
arrow_downward

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

person Josh    schedule 07.03.2013
comment
Это отлично работает, но я не понимаю элемент, которым хочу манипулировать. Как узнать, какой элемент SVG находился под курсором, когда произошло событие нажатия клавиши? - person Gene Golovchinsky; 07.03.2013
comment
для этой цели я бы предложил добавить прослушиватель событий mouseover к вашим элементам, а затем проверить нажатия клавиш в этой функции, хотя я не уверен, что это идеальное решение. - person Josh; 07.03.2013
comment
так что это касается моего вопроса: как проверить нажатия клавиш в событии mouseover без перестройки всей инфраструктуры обработки событий? - person Gene Golovchinsky; 07.03.2013
comment
Я добавил к своему ответу то, к чему, кажется, вы клоните, рассмотрите возможность пересмотра вопроса, если это не так. - person Josh; 08.03.2013
comment
Четкий ответ, ссылка на соответствующие документы и живые примеры. Жаль, я могу дать вам только один голос. - person krawyoti; 13.05.2013