网络图中的工具提示正在闪烁和关闭

Question

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

我想做的是，当用户试图在圆圈/文本上鼠标悬停/鼠标悬停时，工具提示会相应地显示/隐藏。因此，当用户将鼠标从圆圈移动到文本时，工具提示会闪烁，并改变工具提示的位置。这是因为我将show/hide事件赋予了这两个元素。

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

你应该使用圆圈。打开（“鼠标移动”，showDetails）

我还添加了css

svg text {
  pointer-events: none;
}

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