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.