-
Notifications
You must be signed in to change notification settings - Fork 0
/
ChartComponent.cson
63 lines (52 loc) · 1.69 KB
/
ChartComponent.cson
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
'POLITICO Chart Component':
'prefix': 'chart-comp'
'body': """
import { BaseChart, d3 } from '@politico/graphics-kit';
class $1 extends BaseChart {
defaultProps = {
stroke: '#ccc',
strokeWidth: '2px',
fill: 'steelblue',
}
defaultData = [60, 40, 20]
draw() {
const data = this.data();
const props = this.props();
const node = this.selection().node();
const { width, height } = node.getBoundingClientRect();
const t = d3.transition()
.duration(750);
const g = this.selection()
.appendSelect('svg') // see docs in ./utils/d3.js
.attr('width', width)
.attr('height', height - 35)
.appendSelect('g')
.attr('transform', `translate(${width / 2 - 62}, 60)`);
const circles = g.selectAll('circle') // DATA JOIN
.data(data, (d, i) => i);
circles // UPDATE
.style('fill', props.fill)
.style('stroke', props.stroke);
circles.enter().append('circle') // ENTER
.style('fill', props.fill)
.style('stroke', props.stroke)
.style('stroke-width', props.strokeWidth)
.attr('cy', '60')
.attr('cx', (d, i) =>
data.slice(0, i).reduce((a, b) => a + b, 0) + (d / 2)
)
.merge(circles) // ENTER + UPDATE
.transition(t)
.attr('cx', (d, i) =>
data.slice(0, i).reduce((a, b) => a + b, 0) + (d / 2)
)
.attr('r', d => d / 2);
circles.exit() // EXIT
.transition(t)
.attr('r', 0)
.remove();
return this;
}
}
export default $1;
"""