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\').posit

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));
}