| license: mit |
This example demonstrates how to compute a suitable translate and scale to zoom to the bounding box of a particular feature. Click on any state to zoom in; click on the focused state or the background to zoom out.
This variant uses transform transitions to change the viewport. A slightly better approach, and one that can also allow free panning and zooming with the mouse if desired, is to use zoom transitions.
forked from mbostock's block: Valley Faire - Topojson
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .background { | |
| fill: none; | |
| pointer-events: all; | |
| } | |
| .feature { | |
| fill: #bff; | |
| } | |
| .feature.active { | |
| fill: #ffb; | |
| } | |
| .Mall-Boundary { | |
| fill: #fbf; | |
| } | |
| .Units { | |
| cursor: pointer; | |
| } | |
| .mesh { | |
| fill: transparent; | |
| stroke: #000; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| stroke-width: 1px; | |
| vector-effect: non-scaling-stroke; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v4.min.js"></script> | |
| <script src="//unpkg.com/topojson@3"></script> | |
| <script> | |
| var width = 960, | |
| height = 500, | |
| active = d3.select(null); | |
| var projection = d3.geoAlbersUsa(); | |
| var path = d3.geoPath(projection); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| svg.append("rect") | |
| .attr("class", "background") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .on("click", reset); | |
| var g = svg.append("g"); | |
| d3.json("valley-master_L1.json", function(error, us) { | |
| if (error) throw error; | |
| // | |
| console.log(us); | |
| projection.fitSize([ width, height ], us); | |
| g.selectAll("path") | |
| .data(us.features) | |
| .enter().append("path") | |
| .attr("d", path) | |
| .attr("class", function(d) { | |
| return `feature ${d.properties.layer || ''}` | |
| }) | |
| .on("click", clicked); | |
| const topology = topojson.topology({ us }); | |
| console.log(topology); | |
| const topo = topojson.mesh(topology, topology.objects.us); | |
| console.log(topo); | |
| g.append("path") | |
| .datum(topo) | |
| .attr("class", "mesh") | |
| .attr("d", path); | |
| }); | |
| function clicked(d) { | |
| if (active.node() === this) return reset(); | |
| active.classed("active", false); | |
| active = d3.select(this).classed("active", true); | |
| var bounds = path.bounds(d), | |
| dx = bounds[1][0] - bounds[0][0], | |
| dy = bounds[1][1] - bounds[0][1], | |
| x = (bounds[0][0] + bounds[1][0]) / 2, | |
| y = (bounds[0][1] + bounds[1][1]) / 2, | |
| scale = .9 / Math.max(dx / width, dy / height), | |
| translate = [width / 2 - scale * x, height / 2 - scale * y]; | |
| g.transition() | |
| .duration(750) | |
| .attr("transform", "translate(" + translate + ")scale(" + scale + ")"); | |
| } | |
| function reset() { | |
| active.classed("active", false); | |
| active = d3.select(null); | |
| g.transition() | |
| .duration(750) | |
| .attr("transform", ""); | |
| } | |
| </script> |