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

Question

我在此示例后面的d3.js中实现了HTML工具提示,使用如下代码:

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

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

它有效,但表现出一种行为,即如果鼠标在多个节点上快速移动,工具提示可能仍然卡在页面上.上面的例子显示了相同的行为(快乐的摆动!).

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

更新

此问题仅由fadeIn和fadeOut引起.如果将它们设置为零则没有问题.所以问题实际上是否可以设置它以便在存在另一个鼠标悬停/输出事件时中断fadeIn/out.

解析度

问题是只有一个工具提示.在JQuery fadeOut中间,这无法响应事件.答案是有多个工具提示,因此当旧的工具提示逐渐消失时,它可以逐渐消失.这可以通过两种方式实现:

• JQuery fadeOut
• CSS转换(NVD3使用的转换)

Answer 1

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

您还可以研究一些建议的可靠捕获mouseout事件的解决方法：为什么我不能可靠地捕获鼠标移出事件？