d3.js 中的 HTML 工具提示清理答案

【问题标题】：HTML tooltip cleanup in d3.jsd3.js 中的 HTML 工具提示清理
【发布时间】：2012-08-09 03:50:39
【问题描述】：

我在this example 之后在 d3.js 中实现了 HTML 工具提示，使用如下代码：

function onmouseover(d) {
    $("#tooltip").fadeOut(100,function () {
        // generate tooltip
        $("#tooltip").fadeIn(100);
    });
}

function onmouseout() {
    $("#tooltip").fadeOut(250);
}

它可以工作，但会表现出一种行为，即如果鼠标在多个节点上快速移动，工具提示可能会停留在页面上。 example above 表现出相同的行为（快乐的摆动！）。

经过一些研究，似乎nvd3 使用dispatch 很好地解决了这个问题。但是我不太清楚调度是如何工作的，基于this question，我想在这种情况下可能会有更简单的方法。

更新

此问题仅由fadeIn 和fadeOut 引起。如果这些设置为零，则没有问题。所以问题真的是是否可以设置它，以便在有另一个 mouseover/out 事件时中断淡入/淡出。

分辨率

问题是只有一个工具提示。这在 JQuery 淡出过程中无法响应事件。答案是有多个工具提示，这样一个可以淡入而旧的淡出。这可以通过两种方式实现：

JQuery 淡出
CSS 过渡（NVD3 使用的方法）

【问题讨论】：

我会尝试使用mousemove 事件来代替（但它通常可能会不受欢迎）并将fadeOut 移动到svg 的mousemove。不过，即使鼠标在元素内，后者也会触发
你可以有一个标志mouse_inside_the_node，在每个节点的mouseover和mouseout上触发，然后如果mouse_inside_the_node为0，svg上的mousemove将触发fadeout
谢谢。我担心的是，如果在淡出发生时发生另一个事件（即，如果鼠标移到新节点上）会发生什么。我的图表可以有很多节点靠得很近，我开始认为褪色可能是一种不值得的接触。
到更新：您可以尝试在 onmouseover 的开头添加延迟为 0 的“fadeOut”。
据我所知，dispatch 不是 nvd3 解决方案的核心。相反，每次在任何节点上发生 mouseout 事件时，它们也会在此处调用第 78 行的 cleanup 方法来清除死提示：github.com/novus/nvd3/blob/master/src/tooltip.js。

标签： javascript jquery tooltip d3.js

【解决方案1】：

NVD3 的解决方案是每次在任何节点上发生 mouseout 事件时运行清理方法。在第 78 行查看他们的来源：https://github.com/novus/nvd3/blob/master/src/tooltip.js。这不必通过d3.dispatch 来完成；也可以直接做。

您还可以查看一些建议的解决方法，以可靠地捕获 mouseout 事件：Why can't I reliably capture a mouseout event?

【讨论】：