d3 click coordinates are relative to page not svg - how to translate them (Chrome error)

Question

When an event is in play, d3.event.x gives the position of the x coordinate of the mouse click, but relative to the entire HTML doc. I tried using jQuery's $('svg').position() to get the actual position of the svg but this return blatantly fallacious values.

Is there some easy way to find the position of an svg relative to the page that I am overlooking? I am using Chrome, by the way, in case the jQuery problem is an obscure browser error.

EDIT: I checked this in firefox and $('svg').position() returns the correct coordinates. ?!?

Answer 1

Instead of using d3.event, which is the browser's native event, use d3.mouse to get the coordinates relative to some container. For example:

var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500);

var rect = svg.append("rect")
    .attr("width", "100%")
    .attr("height", "100%")
    .on("mousemove", mousemove);

function mousemove(d, i) {
  console.log(d3.mouse(this));
}