Accepted answer

While writing up this question I found the solution (but still going to post it because I spent a very long time searching before finding it deep in a code example). Might be just because I am brand new to d3 and svg this month but there is a getBBox() method on the text element (most elements) that will generate an object with the width/height/x/y (and it really should be used instead of jquery for all svg dimensions).

Hope posting this will help anyone else who runs into this problem because it did not seem very visible to me.


And in the example the ~~ is a flip-bit-operator, twice will actually work like a Math.floor() but will likely be faster in all browsers then .floor().


Got the same problem. Seems like there is a bug in firefox (45.0) that <text> elements width inside SVG is always 0.

I overcame the bug by using a <tspan> element (inside the <text> element), and seems like the <tspan> has the correct width of text.

Hope it helps.

Related Query

More Query from same tag