FallingCircle/FallingCircle.html at master · harry1064/FallingCircle · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3</title>
	<script src="d3.js"></script>
</head>
<body>
<svg width=500 height= 500></svg>
<script>
var dataset = [
                  [ 5,     20 ],
                  [ 480,   90 ],
                  [ 250,   50 ],
                  [ 100,   33 ],
                  [ 330,   95 ],
                  [ 410,   12 ],
                  [ 475,   44 ],
                  [ 25,    67 ],
                  [ 85,    21 ],
                  [ 220,   88 ],
                  [333 ,334],
                  [300, 200],
                  [358, 222],
                  [500,650],
                  [896,254],
                  [548,911],
                  [624,536],
                  [256,656],
                  [899,623]
              ];
      var a=0;
	d3.select("svg")
		.selectAll("circle")
		.data(dataset)
		.enter()
		.append("circle")
		.attr("class","bar")
		.attr("cx", function(d)
		{

			return d[0];
		})

		.attr("cy", function(d)
		{

			return d[1];
		})
		.attr("r",function(d)
		{
			return 5;
		})
		.attr('fill','orange');


		d3.selectAll("circle")
  .transition()
  .delay(function(d, i) {
    return i * 50;
  })
  .duration(3000)
  .attr("cy", "100%")
  .each("end", function() {

    //Move to top
    d3.select(this)
      .transition()
      .ease('elastic')
      .delay(function(d, i) {
        return i * 50;
      })
      .duration(3000)
      .attr("cy", "10%").each("end", function() {
 d3.select(this)
      .transition()
      .ease('elastic')
      .delay(function(d, i) {
        return i * 50;
      })
      .duration(3000)
      .attr("cy", "90%");
})
  });


		// d3.selectAll("circle")
  // .transition()
  // .delay(function(d, i) {
  //   return i * 50;
  // })
  // .duration(3000)
  // .attr("cy", "100%");


</script>
</body>
</html>