25

フォースレイアウトのノードに向けられたキーストロークイベントに応答したいと思います。「keystroke」、「keypress」、「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);
4

1 に答える 1

67

ここでの問題は、フォーカスできない要素にキーボードイベントを追加しようとしていることだと思います。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/

于 2013-03-07T03:47:00.487 に答える