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

Question

我正在开发一个项目，在该项目中我将工具提示附加到 DOM。当我将鼠标悬停在一个对象上时，工具提示会逐渐消失。当我离开时，工具提示淡出。

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

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

Answer 1

您有多种选择：

1. 将元素的 CSS z-index 设置在其他元素的后面：

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

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

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

编辑：最初我建议更改其display样式，但显然未显示仍会生成事件。

3. 或者设置一个隐藏元素的 CSS 类：

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

你的样式表有：

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

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

应该能够用 d3 完成类似的工作：

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

Answer 2

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

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

鼠标事件现在将看穿此元素，并且工具提示不会阻止其他“鼠标悬停事件触发”

如果工具提示根本没有鼠标交互，您可以将指针事件设置为无来启动工具提示（或使用 css 来实现相同的结果）。

但是，如果工具提示有鼠标交互，那么您可以在工具提示上再次需要鼠标交互时重新设置指针事件属性：

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