D3工具提示 - 使用html元素

时间:2015-06-10 10:03:53

标签: javascript jquery d3.js

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

如果我在工具提示中只有文字,它可以正常工作。但我想在工具提示中添加一些html元素,如链接或文本框。徘徊在这些上面,工具提示消失了!与此同时,我可以悬停在任何数量的纯文本上。反正有没有让它留在html元素上呢?

1 个答案:

答案 0 :(得分:3)

我认为这是因为事件冒泡。与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');
});