Newer
Older
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
class SimpleDonut {
constructor(options) {
this.options = options;
var {data, width, height, element} = this.options;
const svg = d3.select(element)
.append('svg')
.attr('class', 'donut-chart-svg')
.attr('width', width)
.attr('height', height);
var tooltip = d3.select('body')
.append('div')
.attr('class', 'd3-tooltip')
.style('position', 'absolute')
.style('z-index', '10')
.style('visibility', 'hidden')
.style('padding', '10px')
.style('background', 'rgba(0,0,0,0.6)')
.style('border-radius', '4px')
.style('color', '#fff')
.text('a simple tooltip');
const color = d3.scaleOrdinal(d3.schemePuBu[9]);
const r = Math.min(width, height) / 2;
const arc = d3.arc()
.innerRadius(r - 50)
.outerRadius(r);
const pie = d3.pie()
.value(d => d.value);
const g = svg.append('g')
.attr('transform', `translate(${width/2},${height/2})`);
g.selectAll('.chart-arc')
.data(pie(data))
.enter()
.append('path')
.attr('class', 'chart-arc')
.attr('d', arc)
.style('fill', d => color(d.data.label))
.on('mouseover', function(event, d, i) {
tooltip
.html('<div>Agent: ' + d.data.label + '</div><div>Value: ' + d.data.value + '</div>')
.style('visibility', 'visible');
})
.on('mousemove', function(event, d) {
tooltip
.style('left', (event.pageX + 10) + "px")
.style('top', (event.pageY - 10) + "px");
})
.on('mouseout', function(event, d) {
tooltip
.html('')
.style('visibility', 'hidden');
});
}
}