Skip to content

Instantly share code, notes, and snippets.

@d3noob

d3noob/.block

Last active May 13, 2021 05:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save d3noob/4966228 to your computer and use it in GitHub Desktop.
Save d3noob/4966228 to your computer and use it in GitHub Desktop.
Download ZIP
Test Zooming and panning of a Mercator map using d3.js.
Raw
.block
license: mit
Raw
README.md

Development File to test zooming and panning of a map using d3.js.

The map pans automatically with a timer function and can be panned and zoomed with a mouse.

However, I've come up against a brick wallin my understanding since I can see that I'm panning and zooming the internal "g" element within the "svg" element.

Full disclosure: This is not my ultimate aim. What I really want is the ability to pan and zoom a Mercator style map, but to have its starting position centred on the international date line (in the middle of the pacific). For some reason this is problematic and I don't understand why.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {font-size:11px;}
path {
stroke: black;
stroke-width: 0.25px;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960,
velocity = .005,
then = Date.now()
height = 475;
var projection = d3.geo.mercator()
.center([0, 0 ])
.scale(1000);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var path = d3.geo.path()
.projection(projection);
var g = svg.append("g");
d3.json("world-110m.json", function(error, topology) {
g.selectAll("path")
.data(topojson.object(topology, topology.objects.countries).geometries)
.enter()
.append("path")
.attr("d", path)
.style("fill","black")
d3.timer(function() {
var angle = velocity * (Date.now() - then);
projection.rotate([angle,0,0]);
svg.selectAll("path")
.attr("d", path.projection(projection));
});
var zoom = d3.behavior.zoom()
.on("zoom",function() {
g.attr("transform","translate("+d3.event.translate.join(",")+")scale("+d3.event.scale+")")
});
svg.call(zoom)
});
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
world-110m.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