Skip to content

Instantly share code, notes, and snippets.

@rbirkby

rbirkby/README.md

Forked from mbostock/.block
Last active December 17, 2015 10:58
Show Gist options
  • Save rbirkby/5598350 to your computer and use it in GitHub Desktop.
Save rbirkby/5598350 to your computer and use it in GitHub Desktop.
Download ZIP
van Wijk Smooth Zooming
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.start {
fill: none;
stroke: brown;
}
.end {
fill: none;
stroke: steelblue;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.interpolate-zoom.v0.min.js?83165af"></script>
<script>
var width = 960,
height = 500,
radius = 10;
var p0 = [250, 200, 60],
p1 = [560, 300, 120];
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.call(transition, p0, p1);
svg.selectAll("circle")
.data([p0, p1])
.enter().append("circle")
.attr("class", function(d, i) { return i ? "end" : "start"; })
.attr("cx", function(d) { return d[0]; })
.attr("cy", function(d) { return d[1]; })
.attr("r", function(d) { return d[2] / 2 - .5; });
function transition(svg, start, end) {
var center = [width / 2, height / 2],
i = d3.interpolateZoom(start, end);
svg
.attr("transform", transform(start))
.transition()
.delay(250)
.duration(i.duration * 2)
.attrTween("transform", function() { return function(t) { return transform(i(t)); }; })
.each("end", function() { d3.select(this).call(transition, end, start); });
function transform(p) {
var k = height / p[2];
return "translate(" + (center[0] - p[0] * k) + "," + (center[1] - p[1] * k) + ")scale(" + k + ")";
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment