Valley Fair - Topojson

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>

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

https://unpkg.com/topojson@3