The width seems to be zero (or NaN) always for an svg:text element in Firefox 15

Question

I am using d3 to make a chart with multiple paths. I am displaying the path(s) description on the left hand side. The data & descriptions are dynamic so the size of the legend is naturally also dynamic, since it is not a big deal as long as I know the size of the text (just a minor adjustment to the domain/range). The problem is that I do not see an easy way to find the size of the text element in Firefox browsers.

Previously I was doing it with jquery's .width() but the clientWidth on the element is zero which seems to cause a NaNpx to be returned.

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

DEMO: Click on the words.

Answer 1

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

希望发布此内容可以帮助遇到此问题的其他人，因为它对我来说似乎不太明显。

演示版

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