d3.js - 为什么我的工具提示会闪烁？

Question

我在这个例子之后创建了一个工具提示。

出于某种原因，当我移动鼠标时，我的工具提示会闪烁。据我了解，该mousemove()函数会找到最近的数据点；因此，只要鼠标在.overlay矩形上方，工具提示就应该始终显示。

有任何想法吗？这是我的小提琴：

http://jsfiddle.net/samselikoff/zhMQ8/1/

Answer 1

发生闪烁是因为工具提示有时出现在鼠标下方并导致调用mouseout并且再次删除工具提示并且鼠标再次位于元素上方，因此调用mouseover并且循环继续......

留出一点空隙（我在其中添加了 5），因此工具提示不会出现在鼠标下方：

tooltip.attr("transform", "translate(" + (xScale(d.date)   + 5  ) + ",0)");

编辑 避免工具提示影响鼠标的另一种可能更好的方法是为其设置样式：

pointer-events: none;

Answer 2

我认为这是在不需要时进行mouseover/mouseout连续触发：

更新小提琴（再次）：http: //jsfiddle.net/zhMQ8/3/

g.on("mouseover", function() { tooltip.style("display", null); });

g.on("mouseout", function() { tooltip.style("display", "none"); });

g.select(".overlay").on("mousemove", mousemove);

Answer 3

发现如果工具提示超出形式会导致此问题。从屏幕边缘向内移动工具提示或缩短工具提示文本。

Answer 4

不要使用 mousemove 属性。使用鼠标悬停。

    private void pboxLabExam_MouseHover(object sender, EventArgs e)
    {
        toolTip1.SetToolTip(pboxLabExamGlow, "LABORATORY EXAM"); //<---
    }