|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> |
|
5 <title>Zoom + Pan</title> |
|
6 <script type="text/javascript" src="../../d3.js"></script> |
|
7 <style type="text/css"> |
|
8 |
|
9 svg { |
|
10 font: 10px sans-serif; |
|
11 shape-rendering: crispEdges; |
|
12 } |
|
13 |
|
14 </style> |
|
15 </head> |
|
16 <body> |
|
17 <script type="text/javascript"> |
|
18 |
|
19 var size = [710, 500], // width height |
|
20 padding = [4, 4, 20, 40], // top right bottom left |
|
21 tx = function(d) { return "translate(" + x(d) + ",0)"; }, |
|
22 ty = function(d) { return "translate(0," + y(d) + ")"; }, |
|
23 stroke = function(d) { return d ? "#ccc" : "#666"; }; |
|
24 |
|
25 // x-scale (1.42 = 710/500) |
|
26 var x = d3.scale.linear() |
|
27 .domain([-1.42, +1.42]) |
|
28 .range([0, size[0]]); |
|
29 |
|
30 // y-scale (inverted domain) |
|
31 var y = d3.scale.linear() |
|
32 .domain([+1.00, -1.00]) |
|
33 .range([0, size[1]]); |
|
34 |
|
35 var svg = d3.select("body").append("svg:svg") |
|
36 .attr("width", size[0] + padding[3] + padding[1]) |
|
37 .attr("height", size[1] + padding[0] + padding[2]) |
|
38 .attr("pointer-events", "all") |
|
39 .append("svg:g") |
|
40 .attr("transform", "translate(" + padding[3] + "," + padding[0] + ")") |
|
41 .call(d3.behavior.zoom() |
|
42 .extent([[0, size[0]], [0, size[1]], [0, 3]]) |
|
43 .on("zoom", redraw)); |
|
44 |
|
45 svg.append("svg:rect") |
|
46 .attr("width", size[0]) |
|
47 .attr("height", size[1]) |
|
48 .attr("stroke", "none") |
|
49 .style("fill", "#fff"); |
|
50 |
|
51 svg.append("svg:a") |
|
52 .attr("xlink:href", "http://mbostock.github.com/d3/") |
|
53 .append("svg:text") |
|
54 .style("font-size", "3em") |
|
55 .attr("transform", "translate(110.5, 110.5)") |
|
56 .text("D3.js"); |
|
57 |
|
58 redraw(); |
|
59 |
|
60 function redraw() { |
|
61 if (d3.event) d3.event.transform(x, y); |
|
62 |
|
63 var fx = x.tickFormat(10), |
|
64 fy = y.tickFormat(10); |
|
65 |
|
66 // Regenerate x-ticks… |
|
67 var gx = svg.selectAll("g.x") |
|
68 .data(x.ticks(10), String) |
|
69 .attr("transform", tx); |
|
70 |
|
71 gx.select("text") |
|
72 .text(fx); |
|
73 |
|
74 var gxe = gx.enter().insert("svg:g", "a") |
|
75 .attr("class", "x") |
|
76 .attr("transform", tx); |
|
77 |
|
78 gxe.append("svg:line") |
|
79 .attr("stroke", stroke) |
|
80 .attr("y1", 0) |
|
81 .attr("y2", size[1]); |
|
82 |
|
83 gxe.append("svg:text") |
|
84 .attr("y", size[1]) |
|
85 .attr("dy", "1em") |
|
86 .attr("text-anchor", "middle") |
|
87 .text(fx); |
|
88 |
|
89 gx.exit().remove(); |
|
90 |
|
91 // Regenerate y-ticks… |
|
92 var gy = svg.selectAll("g.y") |
|
93 .data(y.ticks(10), String) |
|
94 .attr("transform", ty); |
|
95 |
|
96 gy.select("text") |
|
97 .text(fy); |
|
98 |
|
99 var gye = gy.enter().insert("svg:g", "a") |
|
100 .attr("class", "y") |
|
101 .attr("transform", ty); |
|
102 |
|
103 gye.append("svg:line") |
|
104 .attr("stroke", stroke) |
|
105 .attr("x1", 0) |
|
106 .attr("x2", size[0]); |
|
107 |
|
108 gye.append("svg:text") |
|
109 .attr("x", -3) |
|
110 .attr("dy", ".35em") |
|
111 .attr("text-anchor", "end") |
|
112 .text(fy); |
|
113 |
|
114 gy.exit().remove(); |
|
115 |
|
116 } |
|
117 |
|
118 </script> |
|
119 </body> |
|
120 </html> |