javascript - 在 d3 中隐藏带有转换的工具提示

Question

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

这是 fiddle 。我所说的效果并没有像在普通浏览器中那样发生。 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')
      });

Answer 1

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

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