Drag events force you to use inverted y-coordinate system about d3-drag

[mbostock]

d3.drag uses the coordinate system of whatever element you apply it to.

For SVG elements, the coordinate system is obtained using element.getScreenCTM; for other elements, the coordinate system is defined by event.clientX and event.clientY, offset by the subject element’s bounds. See d3-selection’s point.js for the implementation.

Unless you’ve applied an SVG transform, the default coordinate system has [0, 0] in the top-left corner, with +x going right and +y going down. So, one option would be to change the coordinate system of your SVG using the transform attribute.

But, really the problem here is that you are relying on the default drag.subject:

function subject(d) {
  return d == null ? {x: d3.event.x, y: d3.event.y} : d;
}

Thus, d3.drag is using your bound datum as the drag subject, and using d.x and d.y as the starting position of the thing being dragged. Except d3.drag operates in SVG coordinates, and your data is in a different coordinate system. So, the right thing to do is to implement drag.subject and tell the drag behavior the actual starting position of your circle in SVG coordinates:

d3.drag()
    .subject(function(d) { return {x: fromCartesianX(d.x), y: fromCartesianY(d.y)}; })
    .on("drag", dragged)

Then on drag, you set the new position of the circle in SVG coordinates (event.x and event.y), and update the data in data coordinates:

function dragged(d) {
  d.x = toCartesianX(d3.event.x);
  d.y = toCartesianY(d3.event.y);
  d3.select(this).attr("cx", d3.event.x).attr("cy", d3.event.y);
}

Live example:

https://bl.ocks.org/mbostock/519d494035dd642e19eee4e242570114

[j2kun]

Looking into the code, I noticed the event object also exposes dx and dy. So I modified my example to do d.x += d3.event.dx and dy += d3.event.dy.