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

我认为这是因为事件冒泡。与mouseover / mouseout相反，您需要mouseenter / mouseleave。它们与mouseover和mouseout几乎相同，只是它们不会对事件冒泡做出反应。因此，他们将整个HTML元素注册为一个实体块，并且不会对块内发生的鼠标移动和出现做出反应。

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

所以，用进入/离开替换你的结束/离开，你就可以了。

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