将鼠标悬停在隐藏的工具提示上后 D3.js 工具提示重新出现？

Question

如何使用 D3.js 来防止这种情况发生？

问题是当用户将鼠标悬停在显示工具提示信息的点上时。但是，如果他们只是碰巧将鼠标悬停在工具提示曾经可见的区域上，它就会重新弹出。

在这个例子中没什么大不了的。但是，如果我要添加更多信息，或者如果工具提示区域更大，这可能会变得很麻烦。

http://jsfiddle.net/hx8pjwdu/9/

 .on('mouseover', function(d) {     
   d3.select(".d3-tip").transition().style("opacity", "1");
   tip.show(d);
 })
 .on('mouseout', function(d) {
   d3.select(".d3-tip").transition().duration(1000).style("opacity", "0").each("end", tip.hide);
 });
 d3.select(".d3-tip").on('mouseover', function(d) {
   d3.select(".d3-tip").transition().style("opacity", "1");
 }).on('mouseout', function(d) {
   d3.select(".d3-tip").transition().duration(1000).style("opacity", "0").each("end", tip.hide);
 });

Answer 1

您需要省略最后一段。

  d3.select(".d3-tip").on('mouseover', function(d) {
       d3.select(".d3-tip").transition().style("opacity", "1");
     }).on('mouseout', function(d) {
       d3.select(".d3-tip").transition().duration(200).style("opacity", "0").each("end", tip.hide).disable();
     });

这是将mouseover 事件附加到工具提示区域，因此显示它的原因。简单！

http://jsfiddle.net/1ab435px/