How do I get the mouse coordinates using mousedown in d3?

Question

I am trying to create a graph in D3 where you can draw a square to zoom in. Right now, I am trying to get the mousedown function to work. I need to be able to click anywhere in the graph and get the coordinates. This is what I have now:

svg.on("mousedown", mousedown)
function mousedown()
{
    console.log(event.clientX);
}

I know this is not correct, but I can't seem to find how I can access the mouse's coordinates.

Answer 1

firstly, you need to set up the click event properly.

svg.on('mousedown', function() { console.log(d3.event); } );

in your case:

svg.on('mousedown', mousedown);

function mousedown() {
  console.log(d3.event.clientX);
  console.log(d3.event.clientY);
}