Skip to content

Instantly share code, notes, and snippets.

@phil-pedruco

phil-pedruco/index.html

Last active December 25, 2015 22:39
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 phil-pedruco/7051484 to your computer and use it in GitHub Desktop.
Save phil-pedruco/7051484 to your computer and use it in GitHub Desktop.
Download ZIP
Disable zoom on scrollwheel but retain the ability to pan #1
Raw
readme.md

This is a follow up to this stack overflow question that aimed to restrict the scrollwheel zoom ability when using zoom behaviour. Two answers were proposed and this bl.ock here together with this bl.ock demonstrate these answers. The answer by Lars Kotthoff was be far the more elegant and the I'd recommend to use rather than my solution but both achieve the same thing. However, there was a comment that the performance of the second solution was laggy, I thought I'd create a demonstration.

This answer uses translate operator but ignores the zoom, as I said an elegant way to address the problem.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#boroughs {
stroke: grey;
stroke-width: 2px;
fill: steelblue;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<body>
<script>
var width = 960,
height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var projection = d3.geo.mercator()
.center([-73.94, 40.70])
.scale(50000)
.translate([(width) / 2, (height)/2]);
var path = d3.geo.path()
.projection(projection);
var zoom = d3.behavior.zoom()
.translate(projection.translate())
.on("zoom", zoomed);
var g = svg.append("g");
d3.json("nyc.geojson", function(error, nyb) {
g.append("g")
.attr("id", "boroughs")
.selectAll(".state")
.data(nyb.features)
.enter().append("path")
.attr("class", function(d){ return d.properties.name; })
.attr("d", path)
.call(zoom);
});
function zoomed() {
projection.translate(d3.event.translate)//.scale(d3.event.scale);
g.selectAll("path").attr("d", path)
}
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
nyc.geojson
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