Home/ Questions/Q 8542895
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T12:10:36+00:00

I am using d3 to make a chart with multiple paths. I am displaying

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    DEMO

    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().

    • 0