javascript - 将鼠标事件分配给 svg :text in d3. js

Question

我正在尝试为 svg:text 元素获取鼠标事件。我注意到 .on("click", ...) 有效，但其他事件如 "mouseover"、"mousemove" , 而 "mouseout" 则不会。

查看 Health & Wealth of Nations例如，我看到所采用的方法是用不可见的 svg:rect 覆盖文本，并将事件分配给它。如果有一个简单的盒子，这很好，但如果有几个，它似乎会变得令人厌烦和困惑。

是否有规范的方法来处理文本的鼠标悬停事件？

为了尽可能具体，我尝试创建一个标签云并为每个标签挑选这些悬停事件。我可能只用 div 就可以完成它，但我想知道是否有一种简单的方法可以在 SVG 容器中完成它。

Answer 1

我认为将事件分配给文本元素的问题在于它们只触发实际文本，即不触发边界框。理论上它应该可以工作(至少我不知道在这方面对文本有任何特殊处理)——你能举一个具体的例子吗？

您也可以尝试将每个文本元素放在 svg:g 元素中，并将事件处理程序附加到该元素。