-
Notifications
You must be signed in to change notification settings - Fork 0
/
animate2.html
170 lines (146 loc) · 3.49 KB
/
animate2.html
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<meta charset="utf-8">
<title>D3 demo</title>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
}
text {
font: 10px sans-serif;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
</style>
<body>
<button class="data2">data2</button>
<button class="data">data</button>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var dataset = {
apples: [8, 33, 59],
oranges: [20, 80]
};
var data = [{
'name': 'php',
'value': 10,
'percent': 8,
},{
'name': 'js',
'value': 40,
'percent': 33,
},{
'name': 'asp.net',
'value': 70,
'percent': 59,
}];
var data2 = [{
'name': 'php',
'value': 10,
'percent': 20,
},{
'name': 'js',
'value': 40,
'percent': 80,
}];
var width = 700,
height = 500,
radius = Math.min(width, height) / 4;
var enterClockwise = {
startAngle: 0,
endAngle: 0
};
var enterAntiClockwise = {
startAngle: Math.PI * 2,
endAngle: Math.PI * 2
};
var color = d3.scale.category20();
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.percent;
});
var arc = d3.svg.arc()
.innerRadius(radius - 45)
.outerRadius(radius - 30);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
// set the start and end angles to 0 so we can transition
// clockwise to the actual values later
var path = svg.selectAll("path")
.data(pie(data))
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc(enterClockwise))
.each(function(d) {
this._current = {
data: d.data,
value: d.value,
startAngle: enterClockwise.startAngle,
endAngle: enterClockwise.endAngle
}
}); // store the initial values
path.transition() // update
.duration(750)
.each("end",function(){
console.log("here");
})
.attrTween("d", arcTween);
d3.select(".data2")
.on("click", function(){
change(data2);
});
d3.select(".data")
.on("click", function(){
change(data);
});
function change(data) {
path = path.data(pie(data)); // update the data
// set the start and end angles to Math.PI * 2 so we can transition
// anticlockwise to the actual values later
path.enter().append("path")
.attr("fill", function (d, i) {
return color(i);
})
.attr("d", arc(enterAntiClockwise))
.each(function (d) {
this._current = {
data: d.data,
value: d.value,
startAngle: enterAntiClockwise.startAngle,
endAngle: enterAntiClockwise.endAngle
};
}); // store the initial values
path.exit()
.transition()
.duration(750)
.attrTween('d', arcTweenOut)
.remove() // now remove the exiting arcs
path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
}
// Store the displayed angles in _current.
// Then, interpolate from _current to the new angles.
// During the transition, _current is updated in-place by d3.interpolate.
function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) {
return arc(i(t));
};
}
function arcTweenOut(a) {
var i = d3.interpolate(this._current, {startAngle: Math.PI * 2, endAngle: Math.PI * 2, value: 0});
this._current = i(0);
return function (t) {
return arc(i(t));
};
}
</script>
</body>