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("/mbostock/raw/4090846/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> |
