CODEWITHSUNDEEP
d3.jsforce-layout
user1524220
user1524220

Reputation: 160

Interactively fixing a node in a directed force graph

I am currently working with a rather plain, but large force directed graph and I want my users to be able organize the graph however they see fit at the time. To do this, I want to allow them to interactively fix the position of the node. The method of locking the node is up to me; I'm thinking either double clicking the node or pressing a key while mousing over/grabbing the node.

I am unsure of how to do this and cannot find any examples and would greatly appreciate some assistance.

Thank you very much.

Upvotes: 2

Views: 2718

Answers (1)

victorsc
victorsc

Reputation: 722

This is an example where you can click (or drag) a node that will have a fixed position after dropping.

   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();
    }

Full code here.

Upvotes: 8

Related Questions