How do I get my D3 map to zoom to a location?

Question

I\'m working with D3 and so far I\'ve been able to tweak the chloropleth example to only draw a specific state. This involved simply removing all the other polygon data so that

Answer 1

The easiest way to approach this, that I've found, is to set a transform on the g element enclosing the states (#states in the example), based on the bounding box of the state you're zooming to:

// 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 + ")");
    });

There's a lot more you can do here to clean it up - give some margin to the final zoom, check whether you should base the zoom on width or height, change the stroke width depending on zoom, animate the transition, etc - but that's the basic concept.