after rotation getbbox not provide correct cordinatre

24 views
Skip to first unread message

Sudhansu Patro

unread,
May 11, 2018, 1:31:38 AM5/11/18
to d3-js

i rotate the rectangle 90 .After rotation the getBbox() gives me the original rectangle coordinate. How to get the new coordinate after rotation .

g.select("rect").attr('transform', rotate(${90},${20},${30}))

i have rotation of rectangle like this But getBBox() not giving the new coordinate

How to get the new coordinate after rotation .

Ibrahim Tanyalcin

unread,
May 11, 2018, 10:04:40 AM5/11/18
to d3...@googlegroups.com
Hi Sudhansu,

If you would take a look at the svg documentation you would see a phrase like "getBBox return the svgRect after application of the transform attribute ..." etc. This is usually where people will get it wrong. The behavior you observe is due to the fact that the transform that is applied to the rect creates a new viewport and therefore getBBox will return the values with respect to that viewport, which means you will not get what you want.

To achieve what you want, go up 1 level, that is to the parent g element. So:

g.node().getBBox()

this should return the bounding box you are looking for unless it contains other elements. If you have many elements, than trap your elements inside a g element,

<g class="outer">
    <g class="wrapper">
         <rect transform="....."></rect>
    </g>
    <g class="wrapper">
         <rect transform="....."></rect>
    </g>

use the wrappers to get the bbox. This is the most straightforward way to get correct values without dealing with CTM and setting the matrices on the transform nodes yourself, which is also ok. 

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply all
Reply to author
Forward
0 new messages