在d3中隐藏带有过渡的工具提示答案

【问题标题】：Hiding a tooltip with transition in d3在d3中隐藏带有过渡的工具提示
【发布时间】：2014-08-15 08:04:38
【问题描述】：

我是 d3 和一般编码的新手，我正在制作一个带有一些工具提示的社交网络图。当有人将鼠标悬停在节点上时应该出现工具提示，并在移除鼠标时淡出并隐藏。我设法让提示通过过渡淡出，但提示实际上仍然存在，只是不可见，因此框和文本有时会遮盖其他节点，使您无法成功将鼠标悬停在其他节点的某些部分上和触发其他工具提示。当代码只是node.on('mouseout', tip.hide); 时，它可以正常工作，但它没有过渡。

这是小提琴。不过，我所说的效果并不像在普通浏览器中那样发生。 http://jsfiddle.net/wPLB5/

      node.on('mouseover', tip.show); 
      node.on('mouseout', function() { 
          d3.select(".d3-tip")
          .transition()
          .delay(100)
          .duration(500)
          .style("opacity",0);
          tip.hide;
         }); 
      //node.on('mouseout', tip.hide); //This is the original line.

编辑：

我想通了。我需要添加另一种我不知道的样式。这是固定的代码：

  node.on('mouseout', function() {
      d3.select(".d3-tip")
      .transition()
        .delay(100)
        .duration(600)
        .style("opacity",0)
        .style('pointer-events', 'none')
      });

【问题讨论】：

也许将高度和宽度设置为 0 而不是不透明度为 0？我在小提琴中看不到问题。

标签： javascript d3.js tooltip transition

【解决方案1】：

我想通了。我需要添加一个指针事件样式。这是固定的代码：

  node.on('mouseout', function() {
      d3.select(".d3-tip")
      .transition()
        .delay(100)
        .duration(600)
        .style("opacity",0)
        .style('pointer-events', 'none')
      });

【讨论】：

【解决方案2】：

您可以尝试using div tooltip 或using svg title 这两种方法。

 node.append("svg:title")
   .text(function(d) { return "Location:" + " " + d.location + 
      "\nFloruit Date:" + " " + d.floruitDate; });

另外，也许这个答案对你有用D3: show data on mouseover of circle。

【讨论】：