D3工具提示-让鼠标在工具提示上使用html元素

Question

我根据这个问题(当鼠标在工具提示上方时，我如何保持d3鼠标打开？)的答案实现了当鼠标在工具提示上方时，我如何保持d3鼠标打开？工具提示。(示例链接http://bl.ocks.org/larsenmtl/ec50d6ab230f127d5cd9)

如果我在工具提示中只有文本，它就能正常工作。但是我想在工具提示中添加一些html元素，比如链接或文本框。在这些上盘旋，工具提示驱散！同时，我可以悬停在任意数量的纯文本上。是否也要让它停留在html元素上？

Answer 1

我认为这是由于事件冒泡。你需要鼠标/鼠标保存，而不是鼠标/鼠标。它们几乎和鼠标覆盖和鼠标冒泡一样，只是它们不会对事件冒泡做出反应。因此，它们会将注册到的整个HTML元素看作一个完整的块，而不会对发生在块内的鼠标切换和-outs做出反应。

与D3无关，但是在页面底部的jQuery鼠标控制文档上有一个很好的交互演示，它解释了这一点。

所以，将over/out替换为enter/leave，您就会没事的。

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