将鼠标事件分配给d3.js中的svg:text

时间:2012-08-03 20:10:20

标签: javascript svg d3.js

我正在尝试为svg:text元素拾取鼠标事件。我注意到.on("click", ...)有效,但"mouseover""mousemove""mouseout"等其他事件却不起作用。

查看Health & Wealth of Nations示例,我看到所采用的方法是使用不可见的svg:rect覆盖文本,并为其分配事件。如果有一个简单的盒子,这很好,但如果有几个,它似乎会变得无聊和混乱。

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

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

1 个答案:

答案 0 :(得分:6)

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

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