Bounding Box of Polygons

Hello fellow Observable/d3 Community,

I have a question regarding getBBox() behaviour on polygons:
I have a polygon, which is already rendered on screen, and the goal here is to receive the x, y, width and height of given polygon. Now I am facing the following problem:
When I use getBBox() on an Polygon it will give me, for x & y, 0. See picture below (red underlined comparison). The weird behaviour in this case is, that after zooming in to a certain value (0.0069) it will be the right Bounding Box coordinates again.

Can someone help me out here? Has this issue even todo with d3?

Best regards
A confused d3 user

It’s always easier to answer this type of question with a pointer to a notebook with some code. As a general rule, though, element.getBBox won’t work until after the element has already rendered. I see that you say that the element has rendered, but are you certain that it has rendered when you call getBBox?

That is true, I thought i would give it a try without code first, since i have got a few interdependencies in the background, making a minimal running setup time consuming.
And for the render part: I can see the object visible on screen before starting to zoom implicating that objects have already been rendered:
Annotation 2022-03-17 130752
So in this matter it wont make much sense to me why it should be the reason for the misbehviour.

but are you certain that it has rendered when you call getBBox

How can I be certain that “rendered” truly means rendered. I mean, its getting displayed on the screen before calling getBBox() but it doesnt return the right values, which could mean, as u suggest, its not rendered (whilst being displayed??). I am confused

Seeing how width/height and x/y in your example are almost identical, I suspect that you might be accidentally assigning values instead of comparing them?

I also recommend to take a look at the MDN documentation, since you may want getBoundingClientRect() instead. How do you intend to use the bounding box?

I found the problem:


Removing text element from the group will resolve the issue, since I am only displaying this text on certain scale level, so its not rendered from the start on which results in the entire group not getting recognized by getBBox(), I guess.