Skip to content

Instantly share code, notes, and snippets.

@mbostock
Created December 9, 2016 17:05
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save mbostock/9e3fed7a5904991e7973a87628d9f84d to your computer and use it in GitHub Desktop.
Zoom Test II
<!DOCTYPE html>
<svg width="960" height="500">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0.0%" stop-color="#2c7bb6"></stop>
<stop offset="12.5%" stop-color="#00a6ca"></stop>
<stop offset="25.0%" stop-color="#00ccbc"></stop>
<stop offset="37.5%" stop-color="#90eb9d"></stop>
<stop offset="50.0%" stop-color="#ffff8c"></stop>
<stop offset="62.5%" stop-color="#f9d057"></stop>
<stop offset="75.0%" stop-color="#f29e2e"></stop>
<stop offset="87.5%" stop-color="#e76818"></stop>
<stop offset="100.0%" stop-color="#d7191c"></stop>
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="none" pointer-events="all"></rect>
</svg>
<script src="https://d3js.org/d3.v4.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var g = svg.append("g");
g.append("rect")
.attr("fill", "url(#gradient)")
.attr("stroke", "#000")
.attr("width", width)
.attr("height", height);
var zoom = d3.zoom()
.on("zoom", zoomed);
svg
.on("wheel", wheeled)
.call(zoom)
.call(zoom.transform, d3.zoomIdentity
.translate(width / 2, height / 2)
.scale(0.5)
.translate(-width / 2, -height / 2));
function wheeled() {
console.log(d3.event);
}
function zoomed() {
g.attr("transform", d3.event.transform);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment