将鼠标悬停在隐藏的工具提示上后,d3.js工具提示是否重新出现?

如何使用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);
 });