Click-to-zoom via fitSize

Click-to-zoom using projection.fitSize() to interpolate a projection's scale and translate instead of modifying the SVG transform. Has the advantage of leaving stroke-widths alone and the disadvantage of probably being a lot slower.

See also: click-to-zoom via transform

<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  fill: #444;
}

.active {
  fill: #f0f;
}

.mesh {
  stroke: #fff;
  stroke-width: 1.5px;
  pointer-events: none;
  fill: none;
}

</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
    height = 500,
    centered;

var projection = d3.geoAlbersUsa();

var path = d3.geoPath().projection(projection);

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

d3.json("/../../data/us.json", function(err, us) {

var states = topojson.feature(us, us.objects.states);

projection.fitSize([960, 500], states);

svg.selectAll("path")
    .data(states.features)
    .enter()
    .append("path")
    .attr("d", path)
    .on("click", clicked);

svg.append("path")
    .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
    .attr("class", "mesh")
    .attr("d", path);

function clicked(d) {
    centered = centered !== d && d;

var paths = svg.selectAll("path")
      .classed("active", d => d === centered);

// Starting translate/scale
    var t0 = projection.translate(),
      s0 = projection.scale();

// Re-fit to destination
    projection.fitSize([960, 500], centered || states);

// Create interpolators
    var interpolateTranslate = d3.interpolate(t0, projection.translate()),
        interpolateScale = d3.interpolate(s0, projection.scale());

var interpolator = function(t) {
      projection.scale(interpolateScale(t))
        .translate(interpolateTranslate(t));
      paths.attr("d", path);
    };

d3.transition()
      .duration(750)
      .tween("projection", function() {
        return interpolator;
      });
  }
});
</script>

Changed /mbostock/raw/4090846/us.json to a local referenece

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v1.min.js