title: D3 scale.invert() isn't returning date for x
body: <p>I am trying to use <a href="http://bl.ocks.org/mbostock/3902569" rel="noreferrer">this</a> method to get the closest y value, for the x value that is at the current mouse position.</p>
  
  <p>My data set looks like this:</p>
  
  <pre><code>linedata = [{amount:100,date:'2015-11-2'},
              {amount:-1000,date:'2015-11-3'},
              {amount:5000,date:'2015-11-4'}
              ...
             ]
  </code></pre>
  
  <p>I have a line graph that is drawn fine, and I'm just playing with how <code>scale.invert()</code> and bisect work.
  I create a bisect function:</p>
  
  <pre><code>var bisectDate = d3.bisector(function(d) { return d.date; }).left;
  </code></pre>
  
  <p>Then, further down, after drawing the graph, there is a rectangle I put over the area where the graph is drawn</p>
  
  <pre><code>graph.append("rect")
           .attr("class", "overlay")
           .attr("width", w)
           .attr("height", h)
           .on("mouseover", function() { focus.style("display", null); })
           .on("mouseout", function() { focus.style("display", "none"); })
           .on("mousemove", mousemove);
  </code></pre>
  
  <p>Then the <code>mousemove()</code> function is defined like so:</p>
  
  <pre><code>function mousemove() {
      var xPosition = xScale.invert(d3.mouse(this)[0]), //&lt;-- give me the date at the x mouse position
          closestElement = bisectDate(linedata, xPosition, 1), //&lt;-- use the bisector to search the array for the closest point to the left and find that point given our mouse position
          d0 = linedata[closestElement - 1]
          d1 = linedata[closestElement],
          d = xPosition - d0.date &gt; d1.date - xPosition ? d1 : d0;
      focus.attr("transform", "translate(" + xScale(+line_dateFormat.parse(d.date)) + "," + yScale(d.amount) + ")");
      focus.select("text").text(d.amount);
  };
  </code></pre>
  
  <p>The problem I am having is, that this line in the <code>mouseover()</code> function:</p>
  
  <pre><code>var xPosition = xScale.invert(d3.mouse(this)[0])
  </code></pre>
  
  <p>is not returning a date, it is returning a number, like the pixel width of the rectangle. The next line, the bisect, cannot compare this number to the dates, and so ends up always being 1.</p>
  
  <p>I am expecting <code>xPosition</code> to be either dates like this:</p>
  
  <pre><code>Sat Jul 19 2014 09:32:43 GMT+1000 (AEST)
  Sat Jul 19 2014 07:28:21 GMT+1000 (AEST)
  Sat Jul 19 2014 05:24:00 GMT+1000 (AEST)
  Sat Jul 19 2014 03:50:43 GMT+1000 (AEST)
  Fri Jul 18 2014 22:39:49 GMT+1000 (AEST)
  Fri Jul 18 2014 14:53:27 GMT+1000 (AEST)
  </code></pre>
  
  <p>or like this:</p>
  
  <pre><code>1446382800000
  1446382800000
  1446382800000
  1446382800000
  </code></pre>
  
  <p>but I'm getting stuff like this:</p>
  
  <pre><code>531.190359375
  472.78146093749996
  408.8622890625
  358.1677734375
  333.92257031249994
  </code></pre>
  
  <p>Obviously, I am doing it wrong, but I don't understand the fundamentals of why. Can anyone explain to me why im getting numbers and not dates?</p>