网络图中的工具提示会闪烁

Question

我正在为d3js中的网络图创建工具提示，其中每个节点都有圆圈和文本。

我想要做的是，当用户尝试鼠标悬停/抓出圆圈/文本时，工具提示会相应地显示/隐藏。因此，当用户将鼠标从圆圈移到文本时，工具提示会闪烁，并改变工具提示的位置。这是因为我已经将show / hide事件发送给这样的元素。

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

当我悬停某些节点时，工具提示div将位于光标的顶部，所以当我向上移动光标时，鼠标指针将悬停在div上，工具提示会闪烁开启和关闭。

是否可以将特定节点的text，circle和tooltip div组合为单个元素，并且还可以显示工具提示而不会频繁更改位置。还有其他可能吗？

他是我的jsbin链接：http://jsbin.com/AkAdeMoK/2

Answer 1

您应该使用circles.on("mousemove", showDetails);

我还添加了css

svg text {
  pointer-events: none;
}

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