title: d3 x.invert returning Invalid Date from d3.pointer. d3 v6
body: <p>I probably should be sticking with d3 v4 or lower it seems. Anyway, I'm trying to create a typical Area Chart to display stock data. But I'm running into a problem with a mouseover function where I try to get the nearest data point based off mouse location. Similar to what happens when you hover on a graph like on google or yahoo finance. But the main issue is a problem with my X variable I guess.</p>
  <pre><code>   var x = d3.scaleTime().range([0, width]);
     var y = d3.scaleLinear().range([height, 0]);
     var bisect = d3.bisector(function (d) {
       return d.date;
     }).left;
  
     // Create the circle that travels along the curve of chart
  
     var area = d3
       .area()
       .x(function (d) {
         return x(d.date);
       })
       .y0(height)
       .y1(function (d) {
         return y(d.close);
       });
  
     var svg = d3
       .select(&quot;body&quot;)
       .append(&quot;svg&quot;)
       .attr(&quot;width&quot;, width + margin.left + margin.right)
       .attr(&quot;height&quot;, height + margin.top + margin.bottom)
       .append(&quot;g&quot;)
       .attr(&quot;transform&quot;, &quot;translate(&quot; + margin.left + &quot;,&quot; + margin.top + &quot;)&quot;);
  
     var focus = svg
       .append(&quot;g&quot;)
       .append(&quot;circle&quot;)
       .style(&quot;fill&quot;, &quot;none&quot;)
       .attr(&quot;stroke&quot;, &quot;black&quot;)
       .attr(&quot;r&quot;, 8.5)
       .style(&quot;opacity&quot;, 0);
  
     function mouseover() {
       focus.style(&quot;opacity&quot;, 1);
     }
  
     // format the data
     var stockDateObj = {};
     for (const [key, value] of Object.entries(data)) {
       var stockDateObj = {};
       stockDateObj.date = parseTime(key);
       stockDateObj.close = Number(value[&quot;4. close&quot;]);
       setD3Data.push(stockDateObj);
     }
  
     setD3Data = setD3Data.sort(function (x, y) {
       return d3.ascending(x.date, y.date);
     });
  
     this.setState({ currD3Data: setD3Data });
  
     x.domain(
       d3.extent(this.state.currD3Data, function (d) {
         return d.date;
       })
     );
     y.domain([
       0,
       d3.max(this.state.currD3Data, function (d) {
         return d.close;
       }),
     ]);
  
     function mousemove(e) {
       // recover coordinate we need
       console.log(d3.pointer(e, svg.node()));
       var x0 = x.invert(d3.pointer(e, svg.node()));
       console.log(x0);
       var i = bisect(this.state.currD3Data, x0, 1);
       console.log(i);
       var selectedData = this.state.currD3Data[i];
       console.log(selectedData);
       focus.attr(&quot;cx&quot;, x(selectedData.date)).attr(&quot;cy&quot;, y(selectedData.close));
     }
  
     function mouseout() {
       focus.style(&quot;opacity&quot;, 0);
     }
  
     mouseover = mouseover.bind(this);
     mousemove = mousemove.bind(this);
     mouseout = mouseout.bind(this);
  
     svg
       .append(&quot;rect&quot;)
       .style(&quot;fill&quot;, &quot;none&quot;)
       .style(&quot;pointer-events&quot;, &quot;all&quot;)
       .attr(&quot;width&quot;, width)
       .attr(&quot;height&quot;, height)
       .on(&quot;mouseover&quot;, mouseover)
       .on(&quot;mousemove&quot;, mousemove)
       .on(&quot;mouseout&quot;, mouseout); 
  </code></pre>
  <p>The data above shows the creation of the x domain and the svg element that handles the mouseover functionality.</p>
  <p>I don't really know what else to do considering I'm using d3 v6.</p>
  <p>But this my error when i console.log(x0):</p>
  <pre><code>Invalid Date
  </code></pre>