web-dev-qa-db-ja.com

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

ここでの問題は、フォーカスできない要素にキーボードイベントを追加しようとしていることだと思います。keydownイベントをフォーカス可能な要素（この場合は本文）に追加してみてください。

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

ここでは、d3.eventのプロパティ、たとえばd3.event.keyCode、またはより特殊なケースではd3.event.altKey、d3.event.ctrlKey、d3.event.shiftKeyなどを使用できます.

KeyboardEvent Documentation も参考になります。

ここにキーボード操作で簡単なフィドルを作りました： 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/

61
Josh