Question

我在图表上使用d3-tip工具提示。如果有一个简单的方法可以让工具提示在短时间内保持打开状态，我是否正在努力解决这个问题？

在节点上mouseout之后，它会触发.hide()方法，我实际上永远不会将鼠标悬停在工具提示上。

我想我需要一种方法来mouseover工具提示元素，这样我就可以触发.show()方法，如下所示：

tip.on('mouseover', function(d) {
  tip.show(d);
}

但我不确定该怎么做......

我已经设置了一个JSFiddle here。

如果有可能，有什么想法吗？

提前致谢！

Answer 1

结果如下：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);
     });

我为你的d3-tip添加了一个mouseover事件，并使其hide事件变为淡出。

D3：鼠标悬停在工具提示时保持鼠标悬停状态

1 个答案: