-
Notifications
You must be signed in to change notification settings - Fork 16
/
LineChartImpls.js
64 lines (47 loc) · 1.47 KB
/
LineChartImpls.js
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
import D3Component from '../charts/D3Component';
import d3 from 'd3';
import Axis from '../charts/common/Axis';
export default class LineChartImpls extends D3Component {
willMount() {
if (this.props.xaxis) {
this.setAxis(new Axis(this.props.xaxis, this.props.xScale));
}
if (this.props.yaxis) {
this.setAxis(new Axis(this.props.yaxis, this.props.yScale));
}
this.lineGenerator = d3.svg.line();
}
onMount(props) {
super.onMount(props);
this.lineLayer = this.base.append('g').classed('line-layer', true);
this._render();
}
preRender() {
let {data, xAccessor, yAccessor, xScale, yScale, isInterpolated, interpolate} = this.props;
xScale.range([0, this.width]);
yScale.range([this.height, 0]);
this.updateAxis(0, xScale, this.props.xaxis);
this.updateAxis(1, yScale, this.props.yaxis);
const inter = isInterpolated ? interpolate : 'linear';
this.lineGenerator
.interpolate(inter)
.x(d => xScale(xAccessor(d)))
.y(d => yScale(yAccessor(d)));
}
render() {
let {data, xAccessor, yAccessor, xScale, yScale, strokeColor, strokeOpacity} = this.props;
const lines = this.lineLayer.selectAll('path.line').data(data);
lines.exit().remove();
lines.enter()
.append('path')
.attr('class', 'line');
lines
.attr('d', d => this.lineGenerator(d))
.style({
stroke: strokeColor,
strokeOpacity: strokeOpacity
});
}
postRender() {
}
}