I have got this d3.js force layout where the nodes are rectangles with associated text. Whenever a node is dragged the position is fixed, like in mike's example.
I want the nodes to snap to an invisible grid when they are dragged. So that they are neatly aligned. Therefore I've added this to the drag event:
var grid = 50;
d3.select(this)
.attr("x", function(d) { return Math.round(d3.event.x/grid)*grid; })
.attr("y", function(d) { return Math.round(d3.event.y/grid)*grid; });
Somehow this is not working as expected. I guess it has something to do with the tick function of the force layout. But I'm not sure, hence the force.stop(), force.start() calls to see whether that helped.
I've also tried to nest the rect and text in a g element and use transform(translate) to position the nodes. But also without succes.
https://jsfiddle.net/e5fxojvm/
function dblclick(d) {
d3.select(this).classed("fixed", d.fixed = false);
}
function dragstarted(d) {
d3.select(this)
.classed("fixed", d.fixed = true);
}
function dragged(d,i) {
//force.stop();
var grid = 50;
var nx = Math.round(d3.event.x/grid)*grid;
var ny = Math.round(d3.event.y/grid)*grid;
d.px = nx;
d.py = ny;
}
function dragended(d) {
//force.start();
console.log(this);
}
the coordinates for nodes are taken from d.x and d.y for each data point in the nodes array, so though you update the on-screen element's x and y attributes, the next tick resets it to d.x and d.y, giving that little movement you see in your demo (though it doesn't move again after that point as the node is fixed)
You need to discretise the node position data - d.x and d.y - not just the node DOM element's position attributes, and unintuitively enough for fixed nodes this seems to be done through d.px and d.py - the previous node coordinates. It seems fixed nodes in the tick calculate d.x and d.y by setting them to d.px and d.py (https://github.com/mbostock/d3/blob/master/d3.js#L6299)?
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments