1

マウスではなく、Leap Motion を使用しています。これは、マウスの代わりに指、手、およびジェスチャーを使用できるモーション センシング デバイスです。

ユーザーの指が画面と交差するポイントを描画するコードがあるため、ユーザーの指は Web ページ上の青い円で表されます (このコードと同じです: http://schnipz.github.io/leap-motion-demos/ d3.js/index.html )。

この例と同じ、Web ページに Force-Directed グラフもあります: bl.ocks.org/mbostock/4062045

指 (青い円) がノードと交差したときに、ユーザーがノードを「ドラッグ」できるようにしたいと考えています。

クリック シミュレーション コードを動作させることはできますが、次のような X および Y 位置を使用しようとすると...

function mouseSim(type, x, y)
{

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1,
            x, y,
            x, y, false,
            false, false, false, 0/*left*/, null);

    document.dispatchEvent(simulatedEvent);
    console.log(type + " at " + x + ", " + y);
}

目的のコンソール出力が得られますが、グラフとの対話は行われません。

マウス以外、タッチ以外のイベントを使用して D3.js グラフを操作することは可能ですか? もしそうなら、それについて最も効率的な方法は何ですか?

4

2 に答える 2

0

これを実現するために実際にイベントをシミュレートする必要はありません (イベントをシミュレートすると、おそらく必要以上に難しくなります)。リープ ポインティング可能オブジェクトをノードに一致させ、そのfixedプロパティを true に設定して強制レイアウトがその位置を更新しないようにし、ポインティング可能オブジェクトの動きに従ってノードを移動するだけです。

あなたが正しくやっていることを理解していれば、私はすでにそれをここに実装していると思います。ソースはこちらから入手できます。

于 2013-09-14T09:38:42.980 に答える