Skip to content

Instantly share code, notes, and snippets.

@pfitzpaddy

pfitzpaddy/README.md

Last active December 21, 2015 14:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pfitzpaddy/6320612 to your computer and use it in GitHub Desktop.
Save pfitzpaddy/6320612 to your computer and use it in GitHub Desktop.
Download ZIP
Zoom.behavior Sync
Raw
README.md

Zoom.behavior / Path.bounds Sync

d3.zoom.behavior & path.bounds scale/translate out of sync

Example

http://bl.ocks.org/thefitzpaddy/6320612

Description

The example above highlights the issue, which is a combination of bl.ocks Zoom to Bounding Box and Constrained Zoom.

On "click", path.bounds returns the bounding box of a geo feature which is used to zoom the map via translate/scale calculation. The new calculated values from the path.bounds are then used to set the zoom.translate() & zoom.scale(), to ensure that both the projection and zoom.behavior are in sync.

Issue

The map/pan zoom.behavior is out of sync with the click path.bounds translate/scale even when set using zoom.scale(scale) / zoom.translate(translate).

Expected outcome

The desired outcome is for the map/pan zoom.behavior to be in sync with path.bounds calculated translation/scale such that after a user clicks to zoom to a country, they can continue to pan from the path.bounds calculated translate/scale perspective.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
margin: 0;
}
.overlay {
fill: none;
pointer-events: all;
}
.feature {
fill: #ccc;
opacity: 0.5;
cursor: pointer;
stroke: white;
}
.feature.active {
fill: orange;
opacity: 0.6;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var width = Math.max(960, window.innerWidth),
height = Math.max(500, window.innerHeight),
s,t,active;
var projection = d3.geo.mercator()
.scale(width / 2 / Math.PI)
.translate([0,0]);
var zoom = d3.behavior.zoom()
.scaleExtent([1, 12])
.on("zoom", zoomed);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("id", "map")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
svg.append("rect")
.attr("class", "overlay")
.attr("x", -width / 2)
.attr("y", -height / 2)
.attr("width", width)
.attr("height", height);
var vector = svg.append("g");
d3.json("world.json", function(error, world) {
svg.call(zoom);
vector
.attr("id", "world")
.selectAll("path")
.data(topojson.feature(world, world.objects.geolevel3).features)
.enter().append("path")
.attr("d", path)
.attr("class", "feature")
.on("click", click);
});
function click(d) {
console.log(d);
if (active === d) {
vector.selectAll(".active").classed("active", active = false);
// s/t recorded in "zoomed"
var scale = s;
var translate = t;
}else{
vector.selectAll(".active").classed("active", false);
d3.select(this).classed("active", active = d);
// Get bounds and update translate/scale for selected country
// Details on D3 bounding box [http://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object]
var b = path.bounds(d);
var scale = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height);
var translate = [-(b[1][0] + b[0][0]) / 2, -(b[1][1] + b[0][1]) / 2];
}
zoom.scale(scale);
zoom.translate(translate);
console.log("proj trans: " + translate);
// Map transition
vector
.transition()
.duration(2000)
.attr("transform",
"translate(" + projection.translate() + ")"
+ "scale(" + scale + ")"
+ "translate(" + translate + ")")
.style("stroke-width", 1 / scale);
}
function zoomed() {
var t = d3.event.translate,
s = d3.event.scale;
console.log("zoom trans: " + t);
t[0] = Math.min(width / 2 * (s - 1), Math.max(width / 2 * (1 - s), t[0]));
t[1] = Math.min(height / 2 * (s - 1) + 230 * s, Math.max(height / 2 * (1 - s) - 230 * s, t[1]));
zoom.translate(t);
vector.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ")scale(" + s + ")");
}
</script>
Display the source blob
Display the rendered blob
Raw
world.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment