-
Notifications
You must be signed in to change notification settings - Fork 0
/
arc.html
60 lines (56 loc) · 1.62 KB
/
arc.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div.h-bar { height:20px; background: blue; margin-bottom:5px }
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var width = 400,
height = 400,
fullAngle = 2*Math.PI,
colors = d3.scaleOrdinal(d3.schemeCategory20),
svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height)
.attr('class', 'pie');
function render(innerRadius, endAngle) {
if(!endAngle) endAngle = fullAngle;
var data = [
{ startAngle:0, endAngle:0.1*endAngle },
{ startAngle:0.1*endAngle, endAngle:0.2*endAngle }
];
var arc = d3.arc()
.outerRadius(200)
.innerRadius(0);
svg.select('g').remove();
svg.append('g')
.attr('transform', 'translate(200,200)')
.selectAll('path.arc')
.data(data)
.enter()
.append('path')
.attr('class', 'arc')
.attr('fill', function(d,i) {
return colors(i);
})
.attr('stroke-width', 4)
.attr('stroke', 'white')
.attr('d', function(d,i){
return arc(d,i);
})
.on('mouseover', function(){
d3.select(this).attr('fill', '#ff6633')
})
.on('mouseout', function() {
d3.select(this).attr('fill', '')
})
}
render(0);
</script>
</body>
</html>