<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Zoom + Pan</title>
<script type="text/javascript" src="../../d3.js"></script>
<style type="text/css">
svg {
font: 10px sans-serif;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<script type="text/javascript">
var size = [710, 500], // width height
padding = [4, 4, 20, 40], // top right bottom left
tx = function(d) { return "translate(" + x(d) + ",0)"; },
ty = function(d) { return "translate(0," + y(d) + ")"; },
stroke = function(d) { return d ? "#ccc" : "#666"; };
// x-scale (1.42 = 710/500)
var x = d3.scale.linear()
.domain([-1.42, +1.42])
.range([0, size[0]]);
// y-scale (inverted domain)
var y = d3.scale.linear()
.domain([+1.00, -1.00])
.range([0, size[1]]);
var svg = d3.select("body").append("svg:svg")
.attr("width", size[0] + padding[3] + padding[1])
.attr("height", size[1] + padding[0] + padding[2])
.attr("pointer-events", "all")
.append("svg:g")
.attr("transform", "translate(" + padding[3] + "," + padding[0] + ")")
.call(d3.behavior.zoom()
.extent([[0, size[0]], [0, size[1]], [0, Infinity]])
.on("zoom", redraw))
.append("svg:g");
// Generate x-ticks…
var gx = svg.selectAll("g.x")
.data(x.ticks(10))
.enter().append("svg:g")
.attr("class", "x")
.attr("transform", tx);
gx.append("svg:line")
.attr("stroke", stroke)
.attr("y1", 0)
.attr("y2", size[1]);
gx.append("svg:text")
.attr("y", size[1])
.attr("dy", "1em")
.attr("text-anchor", "middle")
.text(x.tickFormat(10));
// Generate y-ticks…
var gy = svg.selectAll("g.y")
.data(y.ticks(10))
.enter().append("svg:g")
.attr("class", "y")
.attr("transform", ty);
gy.append("svg:line")
.attr("stroke", stroke)
.attr("x1", 0)
.attr("x2", size[0]);
gy.append("svg:text")
.attr("x", -3)
.attr("dy", ".35em")
.attr("text-anchor", "end")
.text(y.tickFormat(10));
svg.append("svg:rect")
.attr("width", size[0])
.attr("height", size[1])
.attr("stroke", stroke)
.attr("fill", "none");
function redraw() {
svg.attr("transform",
"translate(" + d3.event.translate + ")"
+ "scale(" + d3.event.scale + ")");
}
</script>
</body>
</html>