diff options
Diffstat (limited to '')
| -rw-r--r-- | web/plot.js | 81 |
1 files changed, 43 insertions, 38 deletions
diff --git a/web/plot.js b/web/plot.js index 98d8d88..cc40989 100644 --- a/web/plot.js +++ b/web/plot.js @@ -23,6 +23,46 @@ const min = d3.format(' '); const minsec = v => `${min(Math.floor(v / 60))}:${sec(Math.floor(v % 60))}`; const degc = v => `${Math.floor(v)}°C`; +const crosshair = svg.append('g') + .attr('display', 'none') + .attr('color', '#00000080') + .attr('font-size', 10) + .attr('font-family', 'sans-serif') + .attr('stroke-width', 0.5); +crosshair.append('text') + .attr('id', 'ctextx') + .attr('y', marginy) + .attr('dx', '0.32em') + .attr('dy', '1em') + .attr('fill', 'currentColor'); +crosshair.append('text') + .attr('id', 'ctexty') + .attr('x', marginx) + .attr('dx', '0.32em') + .attr('dy', '-0.32em') + .attr('fill', 'currentColor');; +crosshair.append('line') + .attr('id', 'clinex') + .attr('stroke', 'currentColor'); +crosshair.append('line') + .attr('id', 'cliney') + .attr('stroke', 'currentColor'); + +const updateCrosshair = ([px, py]) => { + const [time, temp] = [x.invert(px), y.invert(py)]; + + const width = svg.node().clientWidth; + const height = svg.node().clientHeight; + const inRange = marginx < px && px < width - marginx && + marginy < py && py < height - marginy; + + crosshair.attr('display', inRange ? null : 'none').lower(); + crosshair.select('#ctextx').text(minsec(time)).attr('x', px); + crosshair.select('#ctexty').text(degc(temp)).attr('y', py); + crosshair.select('#clinex').attr('x1', px).attr('x2', px).attr('y1', marginy).attr('y2', height - marginy); + crosshair.select('#cliney').attr('y1', py).attr('y2', py).attr('x1', marginx).attr('x2', width - marginx); +}; + export const addPlot = (name, options={}) => { const plot = Object.assign({ color: 'black', @@ -126,7 +166,9 @@ export const update = (transition=true) => { d3.select(this) .attr('cx', (d) => x(d[0])) .attr('cy', (d) => y(d[1])); + update(false); + updateCrosshair([e.x, e.y]); }) .on('end', () => points.attr('cursor', 'grab')) ); @@ -156,46 +198,9 @@ const onresize = () => { }; window.addEventListener('resize', onresize); -const crosshair = svg.append('g') - .attr('display', 'none') - .attr('color', '#00000080') - .attr('font-size', 10) - .attr('font-family', 'sans-serif') - .attr('stroke-width', 0.5); -crosshair.append('text') - .attr('id', 'ctextx') - .attr('y', marginy) - .attr('dx', '0.32em') - .attr('dy', '1em') - .attr('fill', 'currentColor'); -crosshair.append('text') - .attr('id', 'ctexty') - .attr('x', marginx) - .attr('dx', '0.32em') - .attr('dy', '-0.32em') - .attr('fill', 'currentColor');; -crosshair.append('line') - .attr('id', 'clinex') - .attr('stroke', 'currentColor'); -crosshair.append('line') - .attr('id', 'cliney') - .attr('stroke', 'currentColor'); - svg .on('mousemove', (e) => { - const [px, py] = d3.pointer(e); - const [time, temp] = [x.invert(px), y.invert(py)]; - - const width = svg.node().clientWidth; - const height = svg.node().clientHeight; - const inRange = marginx < px && px < width - marginx && - marginy < py && py < height - marginy; - - crosshair.attr('display', inRange ? null : 'none').lower(); - crosshair.select('#ctextx').text(minsec(time)).attr('x', px); - crosshair.select('#ctexty').text(degc(temp)).attr('y', py); - crosshair.select('#clinex').attr('x1', px).attr('x2', px).attr('y1', marginy).attr('y2', height - marginy); - crosshair.select('#cliney').attr('y1', py).attr('y2', py).attr('x1', marginx).attr('x2', width - marginx); + updateCrosshair(d3.pointer(e)); }) .on('dblclick', (e) => { const plot = ACTIVE && PLOTS[ACTIVE]; |