Question

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

问题是当用户将鼠标悬停在该点上时，会看到工具提示信息。但是，如果它们恰好徘徊在工具提示曾经可见的区域上，则会弹出来。

在这个例子中没什么大不了的。但是，如果我要添加更多信息，或者工具提示区域更大，则可能会出现毛病。

 .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/

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

1 个答案: