For SVG elements

Question

135

D3.js: How to get the computed width and height for an arbitrary element?

rated 0 times [ 138] [ 3] / answers: 1 / hits: 128361 / 11 Years ago, mon, february 24, 2014, 12:00:00

I need to know exactly the width and height for an arbitrary g element in my SVG because I need to draw a selection marker around it once the user has clicked it.

What I've seen in the internet is something like: d3.select(myG).style(width). The problem is that the element will not always have an explicit width attribute set. For instance, when I create a circle inside the g, it will have the radious (r) set instead of the width. Even if I use the window.getComputedStyle method on a circle, it will return auto.

Is there a way to calculate the width of an arbitrary svg selement in D3?

Thank you.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ronans

Add To Favorites

Follow

Total Points: 460

Total Questions: 109

Total Answers: 108

Location: Slovenia

Member since Sat, Sep 11, 2021

3 Years ago

ronans questions

1 Warning: Accessing non-existent property 'sequelize' of module exports inside circular dependency

Tue, Jan 4, 22, 00:00, 2 Years ago

1 Cypress - Running only specific test cases from the test suite

Mon, Mar 29, 21, 00:00, 3 Years ago

1 How do I check two regex values with vuelidate

Sat, Oct 24, 20, 00:00, 4 Years ago

1 How to dynamically change SVG fill color?

Tue, Sep 15, 20, 00:00, 4 Years ago

1 How to make a div in a vue component take up the entire screen when using position absolute?

Fri, Jun 26, 20, 00:00, 4 Years ago

View All

answered 11 Years ago jamir · Accepted Answer

For SVG elements

Using something like selection.node().getBBox() you get values like

{

    height: 5, 

    width: 5, 

    y: 50, 

    x: 20

}

For HTML elements

Use selection.node().getBoundingClientRect()