mousemove and mouseover is not working for the last data in d3 chart

Question

In my D3 chart mousemove and mouseover is not working for the last data as depicted in pic attached.

It's always showing the tooltip upto second last element. I have data for last one also but it shows mousemove and mouseover only upto second last element (line and circle) in chart.

Data -

var data = [
      {
        startTime: "1567765320049",
        magnitude: 0
      },
      {
        startTime: "1567851720049",
        magnitude: 0
      },
      {
        startTime: "1568024520049",
        magnitude: 10
      },
      {
        startTime: "1568283720049",
        magnitude: 10
      },
      {
        startTime: "1568629320049",
        magnitude: 0
      },
      {
        startTime: "1569061320049",
        magnitude: 0
      },
      {
        startTime: "1569579720049",
        magnitude: -20
      },
      {
        startTime: "1570184520049",
        magnitude: -20
      },
      {
        startTime: "1570875720049",
        magnitude: 0
      },
      {
        startTime: "1571653320049",
        magnitude: 10
      },
      {
        startTime: "1572517320049",
        magnitude: 0
      },
      {
        startTime: "1573467720049",
        magnitude: 0
      },
      {
        startTime: "1574504520049",
        magnitude: 10
      },
      {
        startTime: "1575627720049",
        magnitude: 10
      }
    ];

I have a working code sandbox here -

https://codesandbox.io/s/sad-bell-qqwwe

Thanks.

Answer 1

This is how I fixed this issue, I am getting which date value is closest to the mouse and displaying in tooltip.

    .on("mouseover", function(d) {
        focus.style("display", null);
        div
            .transition()
            .duration(200)
            .style("opacity", 0.9);
    })
    .on("mouseout", function() {
        focus.style("display", "none");
        div
            .transition()
            .duration(300)
            .style("opacity", 0);
    })

    .on("mousemove", function() {
        var mouse = d3.mouse(this);
        var mouseDate = xScale.invert(mouse[0]);
        var i = bisectDate(data, mouseDate); // returns the index to the current data item

        var d0 = data[i - 1];
        var d1 = data[i];
        let d;
        // work out which date value is closest to the mouse
        if (typeof d1 !== "undefined") {
            d = mouseDate - d0.startTime > d1.startTime - mouseDate ? d1 : d0;
        } else {
            d = d0;
        }

        div
            .html(
                `<span>${parseDate(d.startTime)}</span>
                 <span>Magnitude: ${d.magnitude} </span>`
            )
            .style("left", d3.event.pageX + "px")
            .style("top", d3.event.pageY - 28 + "px");
        var x = xScale(d.startTime);
        var y = yScale(d.magnitude);

Answer 2

You can shift the overlay rectangle width/2 to the left:

 g.selectAll("dot")
  .data(data)
  .enter()
  .append("rect")
  .attr("class", "overlay")
  .attr("width", width)
  .attr("height", height)
  .attr("x", (d) => xScale(d.startTime) - width/2)  //<<<<< new line
  .on("mouseover", function(d) {
    focus.style("display", null);
    div

Updated code sandbox