为什么我的 d3 html div 工具提示不会在鼠标移出时隐藏？答案

【问题标题】：Why won't my d3 html div tooltips hide on mouseout?为什么我的 d3 html div 工具提示不会在鼠标移出时隐藏？
【发布时间】：2013-10-28 17:10:27
【问题描述】：

所以我在 myview.haml 中定义了我的 html 工具提示：

<div id="tooltip" class="hidden">
  <span id="value">whatever</span>
</div>

有以下样式

#tooltip { 
  position: absolute; 
  somestyleattributteshere;  
  pointer-events: none; 
}

#tooltip.hidden { 
  display: none;
}

我的 html div 工具提示在鼠标悬停时显示如下（coffeescript）：

msBarTextLabels.on("mouseover", (d) ->
                   xPosition = svgContainer.offsetLeft
                   yPosition = svgContainer.offsetTop
                   d3.select("#tooltip")
.select("#value")
.html(('charge:' + d.charge + '<br/>intensity: ' + d.m_intensity)
      d3.select("#tooltip").classed("hidden", false)
)
msBarTextLabels.on("mouseout", d3.select("#tooltip").classed("hidden", true) )

因此，工具提示会在鼠标悬停时使用正确的数据和所有内容正确取消隐藏，但不会在鼠标悬停时隐藏，

关于为什么会发生这种情况的任何提示？

谢谢

【问题讨论】：

我不是 Coffeescript 专家，但看起来在第二种情况下，您实际上并没有定义要调用的函数，而是只调用一次的代码。也许像() -> d3.select...这样的东西？

标签： javascript html css d3.js

【解决方案1】：

正如@Lars 所说，您实际上并没有将回调函数传递给mouseout 处理程序。相反，它实际上是在执行 d3.select("#tooltip").classed("hidden", true) 并传递结果（一个 d3 选择）。改为：

msBarTextLabels.on("mouseout", (d) ->
    d3.select("#tooltip").classed("hidden", true)
)

【讨论】：

这完全成功了。令人尴尬的事情是多么明显。