7

我按照这个例子在 d3.js 中实现了 HTML 工具提示，使用如下代码：

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

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

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

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

更新

此问题仅由fadeIn 和fadeOut 引起。如果这些设置为零，则没有问题。所以问题实际上是是否可以设置它，以便在有另一个鼠标悬停/退出事件时中断淡入/淡出。

解析度

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

  • jQuery 淡出
  • CSS 过渡（NVD3使用的方法）
4

1 回答 1

4

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

您还可以查看为可靠地捕获mouseout事件而建议的一些解决方法：为什么我不能可靠地捕获 mouseout 事件？

于 2012-08-18T15:44:48.273 回答