I have created a force layout as shown in this plunker and have implemented semantic zooming as defined by Mike Bostock. That side of things works perfectly in my layout, however when I come to drag a node after zooming (in or out) it doesn't move as expected. When zoomed in, it moves more than the mouse moves, and when zoomed out, it moves less than the mouse. This make me think it's a scaling issue either in the tick function or in the zoom function. I don't think it has anything to do with the dragged function as the code here has no bearing on the position of the node. I.e:
function dragged(d) {
var mouse = d3.mouse(svg.node());
//account for translation and scale
d.x = X.invert(mouse[0]);
d.y = Y.invert(mouse[1]);
tick()
}
has the same effect as:
function dragged(d) {
tick()
}
I have gone through AmeliaBR very comprehensive answer about semantic zooming found here and a whole load of other examples found online and here on SO, but I cannot figure out this bug! Can someone else see what I am doing wrong?
