Reputation: 160
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
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