javascript - d3.js 中的 HTML 工具提示清理

Question

我在 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 引起。如果这些设置为零，则没有问题。所以真正的问题是是否可以设置它以便在有另一个鼠标悬停/移出事件时中断淡入/淡出。

分辨率

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

• JQuery 淡出
• CSS 转换(NVD3 使用的方法)

Answer 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?