I'm using d3, and I'd like to use the getBBox method that SVG elements have.

I'm using the following: (d3Selection.node() as SVGElement).getBBox(), however the TypeScript fails to compile due to the error in the title.

Is SVGElement the wrong type to use? I can it working using any instead, but this seems like a bit of an "unclean" solution.

I'm using d3, and I'd like to use the getBBox method that SVG elements have.

I'm using the following: (d3Selection.node() as SVGElement).getBBox(), however the TypeScript fails to compile due to the error in the title.

Is SVGElement the wrong type to use? I can it working using any instead, but this seems like a bit of an "unclean" solution.

• javascript
• typescript
• d3.js
• svg
• types

• 1 I checked the hierarchy and the getBBox() method are not bound to SVGElement, but to SVGGraphicsElement: developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement – Sirko Commented Aug 21, 2017 at 8:54

2 Answers 2

Not all SVG elements have bounding boxes, <defs> for instance doesn't, neither does <title>, so yes SVGElement is the wrong type to use. You want SVGGraphicsElement

Instead of SVGElement, SVGSVGElement is the correct type to use for accessing <svg> elements, where getBBox() method is available as well because of the inheritance from SVGGraphicsElement.

(d3Selection.node() as SVGSVGElement).getBBox()

Or if d3Selection is defined as

let d3Selection: D3.Selection<SVGSVGElement, {}, HTMLElement, any>
d3Selection.node().getBBox()

could be directly into usage.