|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <title>Pie Chart</title> |
|
5 <script type="text/javascript" src="../../d3.js"></script> |
|
6 <script type="text/javascript" src="../../d3.layout.js"></script> |
|
7 <style type="text/css"> |
|
8 |
|
9 body { |
|
10 font: 10px sans-serif; |
|
11 } |
|
12 |
|
13 </style> |
|
14 </head> |
|
15 <body> |
|
16 <script type="text/javascript"> |
|
17 |
|
18 var w = 400, |
|
19 h = 400, |
|
20 r = Math.min(w, h) / 2, |
|
21 data = d3.range(10).map(Math.random).sort(d3.descending), |
|
22 color = d3.scale.category20(), |
|
23 arc = d3.svg.arc().outerRadius(r), |
|
24 donut = d3.layout.pie(); |
|
25 |
|
26 var vis = d3.select("body").append("svg:svg") |
|
27 .data([data]) |
|
28 .attr("width", w) |
|
29 .attr("height", h); |
|
30 |
|
31 var arcs = vis.selectAll("g.arc") |
|
32 .data(donut) |
|
33 .enter().append("svg:g") |
|
34 .attr("class", "arc") |
|
35 .attr("transform", "translate(" + r + "," + r + ")"); |
|
36 |
|
37 var paths = arcs.append("svg:path") |
|
38 .attr("fill", function(d, i) { return color(i); }); |
|
39 |
|
40 paths.transition() |
|
41 .ease("bounce") |
|
42 .duration(2000) |
|
43 .attrTween("d", tweenPie); |
|
44 |
|
45 paths.transition() |
|
46 .ease("elastic") |
|
47 .delay(function(d, i) { return 2000 + i * 50; }) |
|
48 .duration(750) |
|
49 .attrTween("d", tweenDonut); |
|
50 |
|
51 function tweenPie(b) { |
|
52 b.innerRadius = 0; |
|
53 var i = d3.interpolate({startAngle: 0, endAngle: 0}, b); |
|
54 return function(t) { |
|
55 return arc(i(t)); |
|
56 }; |
|
57 } |
|
58 |
|
59 function tweenDonut(b) { |
|
60 b.innerRadius = r * .6; |
|
61 var i = d3.interpolate({innerRadius: 0}, b); |
|
62 return function(t) { |
|
63 return arc(i(t)); |
|
64 }; |
|
65 } |
|
66 |
|
67 </script> |
|
68 </body> |
|
69 </html> |