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];