Why isn't my drag scaling in d3?
<p>I have a dragging function in d3, which follows a pretty simple pattern, enclosed below. However, the problem with this is that it will set objects to go to pixel coordinates, and as such any coordinates that use the axis' notation will be treated as pixels. This can be seen in this test case: <a href="https://jsfiddle.net/gamea12/qzbhLe0d/" rel="nofollow">https://jsfiddle.net/gamea12/qzbhLe0d/</a></p>

<p>I noticed that this is nothing at all like what happens in <a href="http://bl.ocks.org/mbostock/6123708" rel="nofollow">Mike Bostock's example here</a>, in which objects are moved according to the axis. Is there any reason as to why?</p>

<pre><code>var drag = d3.behavior.drag()
    .origin(function (d) {
        var bbox = this.getBBox();
        console.log(bbox.y);
        return {
            x: bbox.x,
            y: bbox.y

        };
    })
    .on("dragstart", dragstarter)
    .on("drag", dragmove);

function dragmove(d) {
    var barz = document.querySelector("#visual");
    var point = d3.mouse(barz),
        tempP = {
            x: point[0],
            y: point[1]
        };

    if (this.nodeName === "circle") {
document.getElementById("number").innerHTML = nodes[1].x
        d3.event.sourceEvent.stopPropagation();

        var useZoom = $('#zoom').is(":checked");
        if (useZoom == false) {

            d3.select(this).attr("transform", "translate(" + (d.x = tempP.x - xRange(d.initx)) + "," + (d.y = tempP.y - yRange(d.inity)) + ")");


        }
    } else {
    }
}
</code></pre>