title: D3.js get nearest X & Y coordinates for Area Chart
body: <p>Hi I have an area chart with several X (year) &amp; Y (price) values. As I've found there is easy way to get X, Y coodinates value for chart when user clicks on one of the point on line however clicking outside line i.e. SVG/Chart-Body area can provide only X, Y which are coordinates of planes rather than data.</p>
  
  <p><img src="https://i.stack.imgur.com/OsgqT.png" alt="enter image description here"></p>
  
  <p>Point on Chart:</p>
  
  <pre><code>circles = c.svg().selectAll 'circle.dot'
  circles.on 'click', (d) -&gt;
      console.log 'POINT', 'Datum:', d
  </code></pre>
  
  <p>O/P:</p>
  
  <pre><code>POINT Datum: 
  {x: Fri Feb 01 1980 00:00:00 GMT+0000 (GMT Standard Time), y: 666}
  </code></pre>
  
  <p>Point outside chart:</p>
  
  <pre><code>svg.on 'click', () -&gt;
      console.log 'SVG', d3.mouse(@)
  </code></pre>
  
  <p>O/P:</p>
  
  <pre><code>SVG [605.5, 394.5]
  </code></pre>
  
  <p>Now is there any way I could get nearest data coordinates when clicked on SVG? e.g
  SVG [605.5, 394.5] would be (something like <strong>nearest [X, Y]</strong> using)</p>
  
  <pre><code>{x: Fri Feb 01 1980 00:00:00 GMT+0000 (GMT Standard Time), y: 666}
  </code></pre>
  
  <p>or some other way to translate SVG X, Y into Data X, Y?</p>
  
  <p>Original data is in the form of,</p>
  
  <pre><code>[
      {x: Fri Jan 01 1980 00:00:00 GMT+0000 (GMT Standard Time), y: 666},
      {x: Fri Feb 01 1980 00:00:00 GMT+0000 (GMT Standard Time), y: 668},
      {x: Fri Mar 01 1980 00:00:00 GMT+0000 (GMT Standard Time), y: 700},
      {x: Fri Apr 01 1980 00:00:00 GMT+0000 (GMT Standard Time), y: 750},
      .
      .
      .
      {x: Fri Dec 01 2010 00:00:00 GMT+0000 (GMT Standard Time), y: 2000},
      .
      .
      .
  ]
  </code></pre>