Built with blockbuilder.org
forked from marr's block: fitSize [UNLISTED]
license: mit |
Built with blockbuilder.org
forked from marr's block: fitSize [UNLISTED]
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.background { | |
fill: none; | |
pointer-events: all; | |
} | |
.feature { | |
fill: #ccc; | |
cursor: pointer; | |
} | |
.feature.active { | |
fill: orange; | |
} | |
.mesh { | |
fill: none; | |
stroke: #fff; | |
stroke-linecap: round; | |
stroke-linejoin: round; | |
} | |
</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.geoAlbers(); | |
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") | |
.style("stroke-width", "1.5px"); | |
d3.json("valley-master_L1.geojson", function(error, level) { | |
if (error) throw error; | |
console.log(level) | |
projection.fitSize([width, height], level) | |
g.selectAll("path") | |
.data(level.features) | |
.enter().append('path') | |
.attr("d", path) | |
.attr("class", "feature") | |
.on("click", clicked); | |
}); | |
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) | |
.style("stroke-width", 1.5 / scale + "px") | |
.attr("transform", "translate(" + translate + ")scale(" + scale + ")"); | |
} | |
function reset() { | |
active.classed("active", false); | |
active = d3.select(null); | |
g.transition() | |
.duration(750) | |
.style("stroke-width", "1.5px") | |
.attr("transform", ""); | |
} | |
</script> |