# Bounding Box of Polygons

**URL:** <https://talk.observablehq.com/t/bounding-box-of-polygons/6368>\
**Category:** Help\
**Created:** [March 17, 2022, 10:25am UTC](https://talk.observablehq.com/t/bounding-box-of-polygons/6368 "2022-03-17T10:25:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mormusel](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mormusel/32/6289_2.png) [@mormusel](https://talk.observablehq.com/u/mormusel)\
**Post date:** [March 17, 2022, 10:25am UTC](https://talk.observablehq.com/t/bounding-box-of-polygons/6368/1 "2022-03-17T10:25:13Z")

</div>

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.

 ![Capture](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/8/85e68121360e25e101e5f1bf5d60c637196d382b.png)

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

Best regards  
A confused d3 user

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [March 17, 2022, 11:58am UTC](https://talk.observablehq.com/t/bounding-box-of-polygons/6368/2 "2022-03-17T11:58:26Z")

</div>

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`_?

---

<div class="post-metadata">

**Author:** ![mormusel](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mormusel/32/6289_2.png) [@mormusel](https://talk.observablehq.com/u/mormusel)\
**Post date:** [March 17, 2022, 12:11pm UTC](https://talk.observablehq.com/t/bounding-box-of-polygons/6368/3 "2022-03-17T12:11:38Z")

</div>

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](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/0/0ed2a873f3776737299b4c26ec9e134af13e293f.png)  
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

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [March 17, 2022, 9:33pm UTC](https://talk.observablehq.com/t/bounding-box-of-polygons/6368/4 "2022-03-17T21:33:16Z")

</div>

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](https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox), since you may want `getBoundingClientRect()` instead. How do you intend to use the bounding box?

---

<div class="post-metadata">

**Author:** ![mormusel](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mormusel/32/6289_2.png) [@mormusel](https://talk.observablehq.com/u/mormusel)\
**Post date:** [March 18, 2022, 8:39am UTC](https://talk.observablehq.com/t/bounding-box-of-polygons/6368/5 "2022-03-18T08:39:21Z")

</div>

I found the problem:

 ![Annotation 2022-03-18 093623](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/e/e7f3b865574f03eeef6e5b4a2de1ea2d95717314.png)  
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.