D3 中 .remove() 的临时替代方案

Question

我正在做一个项目，我将工具提示附加到 DOM。当我将鼠标悬停在某个对象上时，工具提示会淡入视野。当我离开时，工具提示会淡出。

我遇到的问题是，它仍然位于其他元素之上，因此阻止了 它们的 鼠标悬停事件的触发。通常，我只会删除元素：d3.select("#theElement").transition().style("opacity",0).remove()

问题是，我希望稍后能够在鼠标悬停时重新附加它。有没有办法暂时将工具提示固定在不会妨碍的地方？也许在 DOM 之类的地方？大多数人在 D3 中如何处理这个问题？

Answer 1

您有多种选择：

将元素的 CSS z-index 设置在其他元素之后：

document.getElementById('theElement').style.zIndex = -9999;

将元素的 CSS 样式可见性设置为隐藏：

document.getElementById('theElement').style.visibility = "hidden";

编辑: 本来我建议改变它的display风格，但显然不显示仍然产生事件。

或者设置一个隐藏元素的CSS class:

document.getElementById('theElement').className += ' hide';

您的样式表包含：

.hide: { display: none; visibility: hidden }

或者您正在使用具有此 class（例如 Bootstrap）的现有 CSS 框架。

应该可以用d3完成类似的事情：

d3.select('#theElement').style('z-index', -9999); d3.select('#theElement').style('visibility', 'hidden'); d3.select('#theElement').classed('hide', true);

Answer 2

如果问题是您阻止了鼠标悬停在工具提示下的事件上，否则它是不可见的，您可以在需要隐藏元素时将指针事件属性设置为 none （而不是移动元素）：

 selection.style("pointer-events","none")

鼠标事件现在可以看穿该元素，工具提示不会阻挡其他元素"mouseover events from firing"

如果工具提示根本没有鼠标交互，您可以将指针事件设置为 none 的工具提示附加到开始（或使用 css 以获得相同的结果） .

但是，如果tooltip有鼠标交互，那么在tooltip上再次需要鼠标交互时，可以重新设置pointer events属性：

selection.style("pointer-events","all")

D3 中 .remove() 的临时替代方案

Temporary alternative to .remove() in D3

javascript

css

tooltip

mouseevent

d3.js