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

Question

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

我在做什么

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

我的问题

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

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

但是在我的编码中，我正在编写代码来删除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);
  })

• 我试过不显示以及可见性属性，但都不起作用
• 我不知道我做错了什么
• 我的代码是对还是错，这也是我没有得到正确的

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

PS:我正在使用 Effect 并设置 Timeout 每 1 秒以使其每秒更新一次

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

编辑/更新

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

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

Please have a look here

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

Answer 1

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

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

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

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

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

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