mousemove 和 mouseover 不适用于 d3 图表中的最后一个数据答案

【问题标题】：mousemove and mouseover is not working for the last data in d3 chartmousemove 和 mouseover 不适用于 d3 图表中的最后一个数据
【发布时间】：2019-09-09 15:03:03
【问题描述】：

在我的 D3 图表中，mousemove 和 mouseover 不适用于所附图片中描述的最后一个数据。

它总是将工具提示显示到倒数第二个元素。我也有最后一个的数据，但它仅在图表中显示 mousemove 和 mouseover 到倒数第二个元素（线和圆）。

数据 -

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
      }
    ];

我这里有一个工作代码沙箱 -

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

谢谢。

【问题讨论】：

标签： javascript reactjs d3.js

【解决方案1】：

这就是我解决此问题的方法，我正在获取最接近鼠标的日期值并显示在工具提示中。

    .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);

【讨论】：

【解决方案2】：

您可以将覆盖矩形width/2向左移动：

 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

【讨论】：

添加您的行后，我删除了我在 'mousemove' 中为 d 执行的计算，但它无法正常工作。工具提示没有接近鼠标。