CODEWITHSUNDEEP
javascriptjqueryd3.js
Pavel Matuska
Pavel Matuska

Reputation: 777

How to zoom in on a polygon in D3.js

I am trying to figure out how to do the same zooming behavior as shown in the example below, but with a normal polygon instead of the geo paths.

https://bl.ocks.org/mbostock/4699541

I have seen some answers here on SO that kind of address this, but the animation is choppy or jumps around strangely.

The html I have is

<div id="map-container">
<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     id="canvas"
     viewBox="0 0 4328 2880">
    <defs>
        <pattern id="mapPattern"
                 patternUnits="userSpaceOnUse"
                 x="0"
                 y="0"
                 width="4328"
                 height="2880">
            <image xlink:href="/development/data/masterplan.png"
                   x="0"
                   y="0"
                   width="4328"
                   height="2880"></image>
        </pattern>
    </defs>
    <g id="masterGroup">
        <rect fill="url(#mapPattern)"
              x="0"
              y="0"
              width="4328"
              height="2880" />
    </g>
</svg>

I would like to be able to add some polygons in the same group as the map rectangle and then zoom on the polygon's boundary. Can anyone please show me a fiddle of such behaviour?

I should also add that I do not want to use the scroll wheel or panning. Just zooming in on a clicked polygon and then zooming out on another click.

Upvotes: 2

Views: 838

Answers (1)

thatOneGuy
thatOneGuy

Reputation: 10612

Maybe this will help you. I answered a question here earlier today : D3js outer limits

Here is the fiddle I put together : http://jsfiddle.net/thatOneGuy/JnNwu/921/

I have added a transition : svg.transition().duration(1000).attr('transform',function(d){

Notice if you click one of the nodes the area moves to cater for the size of the new layout.

The basics are explained in the link to the question, but basically I got the bounding box and translated the SVG accordingly. So I translated and scaled to the size of the new rectangle.

Take a look, quite easy to understand. Here is the main part of the transition :

svg.transition().duration(1000).attr('transform',function(d){

var testScale = Math.max(rectAttr[0].width,rectAttr[0].height)
var widthScale = width/testScale
var heightScale = height/testScale 
var scale = Math.max(widthScale,heightScale);

var transX = -(parseInt(d3.select('#invisRect').attr("x")) + parseInt(d3.select('#invisRect').attr("width"))/2) *scale + width/2;
var transY = -(parseInt(d3.select('#invisRect').attr("y")) + parseInt(d3.select('#invisRect').attr("height"))/2) *scale + height/2;

return 'translate(' + transX + ','+ transY + ')scale('+scale+')' ;
})

So with your code, your rectAttr values as seen in the snippet above would be the values retrieved from the getBoundingClientRect() of your polygon : x, y, width and height.

Where I have used d3.select('#invisRect'), this should be your boundingBoxRect() also. And the rest should just work.

EDIT

Here are the edits I made with the fiddle provided : http://jsfiddle.net/thatOneGuy/nzt39dym/3/

I used this function to get the bounding box of the polygon and set the rectangles values accordingly :

var bbox = d3.select(polygon).node().getBBox();

var rectAttr = {
    x: bbox.x,
    y: bbox.y,
    width: bbox.width,
    height: bbox.height,
  };

Upvotes: 3

Related Questions