鼠标移出事件在 JavaScript D3 中无法正常工作

Question

我正在使用 D3 图表，通过所有工作，我已经完成了图表并进行了一些改进。

我在做什么

1. 我有一个显示工具提示的功能，每当我将鼠标悬停在任何栏上时，我都会向用户显示一些信息。
2. 我的图表显示实时数据，因此如果有任何新数据出现，它会自动创建一个新柱。
3. 所以，当我将鼠标悬停在任何条上时，数据显示良好且完美

我的问题

4. 所以正如我上面提到的，在我的例子中数据是在一段时间后连续出现的，所以我正在获取数据并将其添加到以前的数据中

5. 问题是当我将鼠标悬停在最后一个栏时，工具提示显示正常，而当新数据出现时，现在显示两个工具提示，并且一直持续

但在我的编码中，我正在编写代码以删除 mouseout 上的工具提示，但仍然遇到此问题

我的代码

这就是我正在做的事情

.on("mousemove", function (event, d) {
    // this whole code is when I hover that perticular bar
    d3.select(this)
      .transition()
      .duration("50")
      .attr("opacity", 0.6)
      .attr("x", (a) => xScaleBars(a.timeline) - 3)
      .attr("width", xScaleBars.bandwidth() + 6)
      .style("filter", "url(#glow)");

    div.transition().duration(50).style("opacity", 1);
    div
      .html(
        `</text><text"></br> value :  ${d.dataToShow}
        <br/>
        </text><text"></br> Month :  ${d.month}
        `
      )

      .style("left", event.pageX - 58 + "px")
      .style("top", event.pageY - 140 + "px");
  })

上面的代码是我在漫游时的代码

下面是我做mouseout时的代码

 .on("mouseout", function (d, i) {
    // this is when I move cursor out of that bar
    d3.select(this)
      .transition()
      .duration("50")
      .attr("width", xScaleBars.bandwidth())
      .attr("x", (a) => xScaleBars(a.timeline))
      .style("filter", "none")
      .attr("opacity", "1");
    div.transition().duration("50").style("opacity", 0);
  })

• 我尝试过 display none 和 visibility 属性，但没有任何效果
• 我不知道自己做错了什么
• 我的代码是对是错，这也是我没有正确理解

我已将所有代码放入代码沙箱中 Please have a look

PS：我正在使用每 1 秒设置超时的使用效果，以使其每秒更新一次

我已经通过堆栈溢出检查了所有相关建议，但没有人帮助我，可能是我错了，但我没有找到解决方案。

编辑/更新

如果我有不止一次图表，下面建议的答案不起作用 我用d3.selectAll(".tooltipCHart").remove();

因此，当第一个图表的条形图悬停有两个图表时，它会显示工具提示，但是当我将鼠标悬停在另一个图表上时，它不会显示

Please have a look here

在上面第一个图表中的代码沙箱中，它不显示工具提示，但在第二个图表中显示

Answer 1

Vivek，我检查了代码，发现大部分代码都很好。除此之外，多个工具提示的原因是您在数据更改时渲染所有内容，因此您每次都附加工具提示 div，这意味着下面的代码将执行多次，在我们的代码没有执行鼠标操作的情况下显示多个工具提示。您可以通过检查元素来检查这一点。

var div = d3
      .select("body")
      .append("div")
      .attr("class", "tooltipCHart")
      .style("opacity", 0);

简单的解决方案是在添加新工具提示之前删除所有工具提示。

 d3.selectAll(".tooltipCHart").remove();

它将解决多个工具提示的问题。

但是对于您的图表，我的困惑是显示工具提示是否是个好主意，因为数据总是向左移动，因此很难长时间保留工具提示。