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

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

这是小提琴。不过，我所说的效果并不像在普通浏览器中那样常见

编辑：

---

我想出来了。我需要添加另一种我不知道的风格。以下是固定代码：

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

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

---

您可以尝试这两种方法

---

另外，也许这个答案对你有用。

我想出来了。我需要添加一个指针事件样式。以下是固定代码：

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

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

---

是否可以将高度和宽度设置为0，而不是不透明度设置为0？我看不出有什么问题。