d3.js - 有向力グラフでノードをインタラクティブに修正

Question

私は現在、かなり単純ですが、大きな力指向のグラフを使用しています。ユーザーがその時点で適切と思われる方法でグラフを整理できるようにしたいと考えています。これを行うには、ノードの位置をインタラクティブに修正できるようにします。ノードをロックする方法は私次第です。ノードをダブルクリックするか、ノードをマウスオーバー/グラブしながらキーを押すことを考えています。

私はこれを行う方法がわからず、例を見つけることができません。いくつかの支援をいただければ幸いです。

どうもありがとうございます。

Answer 1

これは、ドロップ後に固定位置を持つノードをクリック (またはドラッグ) できる例です。

   var node_drag = d3.behavior.drag()
        .on("dragstart", dragstart)
        .on("drag", dragmove)
        .on("dragend", dragend);

    function dragstart(d, i) {
        force.stop() // stops the force auto positioning before you start dragging
    }

    function dragmove(d, i) {
        d.px += d3.event.dx;
        d.py += d3.event.dy;
        d.x += d3.event.dx;
        d.y += d3.event.dy; 
        tick(); // this is the key to make it work together with updating both px,py,x,y on d !
    }

    function dragend(d, i) {
        d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff
        tick();
        force.resume();
    }

完全なコードはこちら。