← Back to branch summary

~bac/juju-gui/trunkcopy

« back to all changes in this revision

Viewing changes to lib/d3/examples/transform/transform.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/d3/examples/transform/transform.html
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.v2.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 width = 960,
24
 
    height = 500,
25
 
    z = 20,
26
 
    x = width / z,
27
 
    y = height / z;
28
 
 
29
 
var svg = d3.select("body").append("svg")
30
 
    .attr("width", width)
31
 
    .attr("height", height);
32
 
 
33
 
svg.selectAll("rect")
34
 
    .data(d3.range(x * y))
35
 
  .enter().append("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>