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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.14.2/d3.js"
integrity="sha256-x4D7g5KkbQk6aRjxRFqlCsyMytoqhcisSwVVsVepuuE="
crossorigin="anonymous"
></script>
</head>
<body></body>
<script>
var w = 400,
h = 400;
var svg = d3
.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var data = [
{
startAngle: (0 * Math.PI) / 180,
endAngle: 40
},
{
startAngle: (40 * Math.PI) / 180,
endAngle: 110
}
];
/* d3.arc가 원래 팩토리 함수처럼 계속 내보낼줄 알았는데 그렇지 않아서 쓸때마다 다시써야함... */
var circle_2 = svg.append("path");
var circle = svg.append("path");
circle
.attr("x", 100)
.attr("y", 100)
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
.attr("fill", "black");
circle_2
.attr("x", 100)
.attr("y", 100)
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
.attr("fill", "red");
function tweenPie(idx) {
const interpolate = d3.interpolate(
(data[idx].startAngle * Math.PI) / 180,
(data[idx].endAngle * Math.PI) / 180
);
return function(d) {
return function(t) {
data[idx].endAngle = interpolate(t);
// 이걸 통해서 다시 그려줘야 함..
var arc2 = d3
.arc()
.innerRadius(0)
.outerRadius(100)
.startAngle(data[idx].startAngle)
.endAngle(data[idx].endAngle);
return arc2();
};
};
}
circle
.datum(data[0]) // ??? 이런저런 callback 에다가 데이터를 매개변수로 bind 해준다
.transition()
.ease(d3.easeExp) // easeElastic, easeBounce, easeLinear, easeSin, easeQuad, easeCubic, easePoly, easeCircle, easeExp, easeBack
.duration(1000)
.attrTween("d", tweenPie(0)); // 보간이라고 해서 움직이는 과정을 대략 60~100번 나누어서 실행하는것
circle_2
.datum(data[1]) // ??? 이런저런 callback 에다가 데이터를 매개변수로 bind 해준다
.transition()
.ease(d3.easeExp) // easeElastic, easeBounce, easeLinear, easeSin, easeQuad, easeCubic, easePoly, easeCircle, easeExp, easeBack
.duration(500)
.delay(2000)
.attrTween("d", tweenPie(1)); // 보간이라고 해서 움직이는 과정을 대략 60~100번 나누어서 실행하는것
</script>
</html>
|
덧글