```
let circles = svg.selectAll("circle").data(data).enter().append("circle");
circles.attr("cx", function (d) { return fromCartesianX(d.x); }) // d has cartesian coordinates
.attr("cy", function (d) { return fromCartesianY(d.y); })
.attr("r", 20);
```

However, when I introduce a drag event handler, the drag event coordinates are computed *relative* to the input point, and assumes that data point uses the "y-inverted" coordinate system!

```
function dragged(d) {
d.x = d3.event.x;
d.y = d3.event.y;
...
d3.select(this).attr("cx", fromCartesianX(d.x))
.attr("cy", fromCartesianY(d.y));
```

When dragging, this causes the y value to move inverted to how it should.

How can I tell d3 to compute the event x,y absolutely, in the containing svg coordinate system? Then I could replace the above with the following, which makes much more sense.

```
function dragged(d) {
d.x = toCartesian(d3.event.x);
d.y = toCartesian(d3.event.y);
...
d3.select(this).attr("cx", fromCartesianX(d.x))
.attr("cx", fromCartesianY(d.y));
```