Geek asks and answers

How to get a D3 card to zoom in?

I work with D3, and so far I have managed to set up an example of a chloroplan to draw a specific state. This included simply deleting all the other polygon data so that I stayed with the state I needed.

I started with this: enter image description here

and then changed the situation: enter image description here

However, what I would like to do is automatically pan / zoom the map when creating, so that the state is in the front and center on the display, for example: enter image description here

Am I doing this through the D3 library? or some kind of independent code (I currently have jquery-svgpan working with d3 to allow manual pan / zoom) to make this happen?

+5
source share
1 answer

, , - g, (#states ), , :

// your starting size
var baseWidth = 600;

d3.selectAll('#states path')
    .on('click', function(d) {
        // getBBox() is a native SVG element method
        var bbox = this.getBBox(),
            centroid = [bbox.x + bbox.width/2, bbox.y + bbox.height/2],
            zoomScaleFactor = baseWidth / bbox.width,
            zoomX = -centroid[0],
            zoomY = -centroid[1];

        // set a transform on the parent group element
        d3.select('#states')
            .attr("transform", "scale(" + scaleFactor + ")" +
                "translate(" + zoomX + "," + zoomY + ")");
    });

, - , , , , .. .

+5

More articles:


All Articles