javascript - 对于 svg :text element in Firefox 15，宽度似乎始终为零(或 NaN)

Question

我正在使用 d3 制作包含多个路径的图表。我在左侧显示路径描述。数据和描述是动态的，所以图例的大小自然也是动态的，因为只要我知道文本的大小就没什么大不了的(只是对域/范围的微小调整)。问题是我没有找到在 Firefox 浏览器中查找文本元素大小的简单方法。

以前我是用 jquery 的 .width() 做的，但是元素上的 clientWidth 为零，这似乎导致返回 NaNpx。

...
.on("click", function(){
    alert( $(this).width() ); // NaNpx
})
...

DEMO : 点击文字。

Answer 1

在写下这个问题时，我找到了解决方案(但仍然要发布它，因为我花了很长时间进行搜索，然后才深入代码示例中找到它)。可能只是因为我这个月是 d3 和 svg 的新手，但是文本元素(大多数元素)上有一个 getBBox() 方法，它将生成一个宽度/高度/x/的对象y(对于所有 svg 尺寸，它确实应该代替 jquery 使用)。

希望发布这篇文章能帮助遇到这个问题的其他人，因为我觉得它不是很明显。

DEMO

在示例中，~~ 是一个翻转位运算符，twice 实际上会像 Math.floor() 一样工作，但在所有浏览器中可能会比 .floor 更快()。