d3.js - 网络图中的工具提示闪烁

Question

我正在为 d3js 中的网络图创建一个工具提示，其中每个节点都有圆圈和文本。
我想要做的是，当用户尝试在圆圈/文本上鼠标悬停/鼠标移开时，工具提示会相应地显示/隐藏。因此，当用户将鼠标从圆圈悬停到文本时，工具提示会不断闪烁并改变工具提示的位置。这是因为我已经为这两个元素提供了显示/隐藏事件。

circles.on("mouseover", showDetails);
circles.on("mouseout", hideDetails);
text.on("mouseover", showDetails);
text.on("mouseout", hideDetails);

并且当我将鼠标悬停在某些节点上时，工具提示 div 将位于光标的顶部，因此当我向上移动光标时，鼠标指针将悬停在 div 上，并且工具提示会闪烁。

是否可以将特定节点的文本、圆圈和工具提示 div 组合为单个元素，并在不频繁更改位置的情况下显示工具提示。有没有其他可能性来做到这一点？
他是我的jsbin链接: http://jsbin.com/AkAdeMoK/2

Answer 1

您应该使用 circles.on("mousemove", showDetails);
我还添加了 css

svg text {
  pointer-events: none;
}

这是现在的样子 - http://jsbin.com/omaguJO/1