d3 drag behavior of a node in a force layout with semantic zoom not working as expected
<p>I have created a force layout as shown in this <a href="http://plnkr.co/edit/aZH2Gl82XFic0SSXbqPT" rel="nofollow noreferrer">plunker</a> and have implemented semantic zooming as defined by <a href="http://bl.ocks.org/mbostock/3681006" rel="nofollow noreferrer">Mike Bostock</a>. 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 <code>tick</code> function or in the <code>zoom</code> function. I don't think it has anything to do with the <code>dragged</code> function as the code here has no bearing on the position of the node. I.e:</p>

<pre><code>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()
}
</code></pre>

<p>has the same effect as:</p>

<pre><code>function dragged(d) {
  tick()
}
</code></pre>

<p>I have gone through <a href="https://stackoverflow.com/users/3128209/ameliabr">AmeliaBR</a> very comprehensive answer about semantic zooming found <a href="https://stackoverflow.com/questions/21344340/sematic-zooming-of-force-directed-graph-in-d3">here</a> 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?</p>