javascript - D3 : Keep mouseover Open While Mouse is Over Tooltip

Question

我正在使用 d3-tip对于我的图表上的工具提示。我想知道是否有一种简单的方法可以让工具提示在短时间内保持打开状态？

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

我想我需要一种方法来鼠标悬停工具提示元素，这样我就可以触发.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 添加了一个鼠标悬停事件，并将其隐藏事件设为淡出。