equal
deleted
inserted
replaced
|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> |
|
5 <title>Transform Transitions</title> |
|
6 <script type="text/javascript" src="../../d3.js"></script> |
|
7 <style type="text/css"> |
|
8 |
|
9 body { |
|
10 margin: 0; |
|
11 } |
|
12 |
|
13 rect { |
|
14 stroke: #fff; |
|
15 stroke-width: .05px; |
|
16 } |
|
17 |
|
18 </style> |
|
19 </head> |
|
20 <body> |
|
21 <script type="text/javascript"> |
|
22 |
|
23 var w = 960, |
|
24 h = 500, |
|
25 z = 20, |
|
26 x = w / z, |
|
27 y = h / z; |
|
28 |
|
29 var svg = d3.select("body").append("svg:svg") |
|
30 .attr("width", w) |
|
31 .attr("height", h); |
|
32 |
|
33 svg.selectAll("rect") |
|
34 .data(d3.range(x * y)) |
|
35 .enter().append("svg:rect") |
|
36 .attr("transform", translate) |
|
37 .attr("width", z) |
|
38 .attr("height", z) |
|
39 .style("fill", d3.scale.linear().domain([0, x * y]).range(["brown", "steelblue"])) |
|
40 .on("mouseover", mouseover); |
|
41 |
|
42 function translate(d) { |
|
43 return "translate(" + (d % x) * z + "," + Math.floor(d / x) * z + ")"; |
|
44 } |
|
45 |
|
46 function mouseover(d) { |
|
47 this.parentNode.appendChild(this); |
|
48 d3.select(this).transition() |
|
49 .duration(750) |
|
50 .attr("transform", "translate(480,480)scale(23)rotate(180)") |
|
51 .transition() |
|
52 .delay(1500) |
|
53 .attr("transform", "translate(240,240)scale(0)rotate(180)") |
|
54 .style("fill-opacity", 0) |
|
55 .remove(); |
|
56 } |
|
57 |
|
58 </script> |
|
59 </body> |
|
60 </html> |