This example demonstrates how to compute a suitable translate and scale to zoom to the bounding box of a particular feature. Click on any state to zoom in; click on the focused state or the background to zoom out.
This variant uses transform transitions to change the viewport. A slightly better approach, and one that can also allow free panning and zooming with the mouse if desired, is to use zoom transitions.
Hi Mike,
I have a question for you concerning how you derive your scale
.9 / Math.max(dx / width, dy / height)
. I understand that.9
value makes sure that we have a margin between the edges and the element we want to zoom to. I was wondering if there is a way to get a zero edge-to-edge margin. Furthermore, could you please help me understand how that 0.9 is arrived at? Is it a ratio between the SVGheight
&width
?. ThanksRegards Cyrus.