title: Binding "mouseover" events to points on a line in d3.js
body: <p>I would like to get the coordinates of a point on a line by clicking on the line using the following code:</p>
  
  <pre><code>var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
                   { "x": 40,  "y": 10}, { "x": 60,  "y": 40},
                   { "x": 80,  "y": 5},  { "x": 100, "y": 60}];
  
  var lineFunction = d3.svg.line()
      .x(function(d) { return d.x; })
      .y(function(d) { return d.y; })
      .interpolate("linear");
  
  var svgContainer = d3.select("body").append("svg")
      .attr("width", 200)
      .attr("height", 200);
  
  var lineGraph = svgContainer.append("path")
      .data([lineData]).attr("d", lineFunction)
    //.attr("d", lineFunction(lineData))  
      .attr("stroke", "blue")
      .attr("stroke-width", 2)
      .attr("fill", "none")
      .on('mousedown', function(d) {
          console.log({"x":d.x, "y":d.y})
      });
  </code></pre>
  
  <p>(I updated the code to address the comments, but I still get "Object {x: undefined, y: undefined}")</p>
  
  <p>I keep getting an "undefined" when clicking on the line. Am I missing a step?</p>