title: Get coordinates of mouse click on svg using d3
body: <p>I want to get the coordinates of a mouse click on a rectangular shaped svg.  I'm trying to print the mouse click coordinates to the console.</p>
  
  <p>I can use <code>pageX</code> and <code>pageY</code> to get the coordinates, but that is of the entire page. I just need the coordinates inside the svg.</p>
  
  <p>I'm using <code>d3.v3.min.js</code></p>
  
  <p>So I tried:</p>
  
  <pre><code>$(document).mousedown(function () {
       console.log(d3.mouse(this));
  });
  </code></pre>
  
  <p>I get the error: </p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'sourceEvent' of null</p>
  </blockquote>
  
  <p>I also tried:</p>
  
  <pre><code>$(document).mousedown(function () {
       console.log(d3.mouse(document.getElementById("svg_id")));
  });
  </code></pre>
  
  <p>I get the same error.</p>
  
  <p>When I try with <code>d3.svg.mouse(this)</code>, I get error: </p>
  
  <blockquote>
    <p>Uncaught TypeError: undefined is not a function</p>
  </blockquote>
  
  <p>How can I get the click coordinates in the svg and why are these <code>d3.mouse()</code> functions not working? </p>