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
|
import './lib/d3.v7.min.js';
let POINTS = [];
const x = d3.scaleLinear([0, 350]);
const y = d3.scaleLinear([0, 120]).nice(30);
// Declare the line generator.
const line = d3.line()
.x((d, i) => x(i))
.y((d, i) => y(d));
const margin = 40;
const svg = d3.select('#plot');
// Add the x-axis.
const xa = svg.append('g');
// Add the y-axis.
const ya = svg.append('g');
// add the plot.
const plot = svg.append('path')
.attr('fill', 'none')
.attr('stroke', 'black')
.attr('stroke-width', '2');
const sec = d3.format('02');
const min = d3.format(' ');
const minsec = v => `${min(Math.floor(v / 60))}:${sec(v % 60)}`;
const update = () => {
x.domain([0, Math.max(POINTS.length, 120)]).nice(30);
y.domain(d3.extent([...d3.extent(POINTS), 0, 350]));
xa.transition().call(d3.axisBottom(x).tickFormat(minsec))
ya.transition().call(d3.axisLeft(y))
plot.transition().attr('d', line(POINTS));
};
export const clear = () => {
POINTS = [];
update();
};
export const addPoint = (temp) => {
POINTS.push(temp);
update();
};
const onresize = () => {
const width = svg.node().clientWidth;
const height = svg.node().clientHeight;
svg
.attr('width', width)
.attr('height', height);
x.range([margin, width-2*margin]);
y.range([height-2*margin, margin]);
xa.transition().call(d3.axisBottom(x).tickFormat(minsec))
ya.transition().call(d3.axisLeft(y))
plot.transition().attr('d', line(POINTS));
xa.attr('transform', `translate(0, ${height - 2*margin})`);
ya.attr('transform', `translate(${margin}, 0)`);
};
window.addEventListener('resize', onresize);
onresize();
update();
|
