D3 工具提示 - 将鼠标放在带有 html 元素的工具提示上

Question

我已经根据这个问题的答案（How can I keep a d3 mouseover open while my mouse is over the tooltip?）实现了 d3 工具提示。 （示例链接http://bl.ocks.org/larsenmtl/ec50d6ab230f127d5cd9）

如果我在工具提示中只有文本，它可以正常工作。但我想在工具提示中添加一些 html 元素，例如链接或文本框。将鼠标悬停在这些上时，工具提示就会消失！同时，我可以将鼠标悬停在任意数量的纯文本上。有没有办法让它也停留在 html 元素上？

Answer 1

我认为这是由于事件冒泡。你需要 mouseenter/mouseleave 而不是 mouseover/mouseout。它们与 mouseover 和 mouseout 几乎相同，只是它们不对事件冒泡做出反应。因此，他们将注册到的整个 HTML 元素视为一个实心块，并且不会对块内发生的鼠标悬停和 -out 做出反应。

与 D3 无关，但是，在页面底部的 jQuery mouseover docs 上有一个很好的交互式演示来解释这一点。

所以，将你的 over/out 替换为 enter/leave 就可以了。

.on('mouseenter', function(d, i) {
    tip.transition().duration(0);
})
.on('mouseleave', function(d, i) {
    tip.style('display', 'none');
});