From bf990a02c0b339cac32c656984a2a4fe002499fc Mon Sep 17 00:00:00 2001
From: Jan Philipp Timme <jan.philipp@timme.it>
Date: Sat, 30 Dec 2017 13:56:03 +0100
Subject: [PATCH] Add doubleclick event to prepare for adding animating
 expanding the chart

---
 js/diagrams.js | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/js/diagrams.js b/js/diagrams.js
index 0eed7e7..dcb3cae 100644
--- a/js/diagrams.js
+++ b/js/diagrams.js
@@ -67,7 +67,7 @@ function createLineGraph(containerId, raceData){
       svg.append("path")
           .data([driverLapData.laps])
           .attr("class", "line")
-          .attr("data-line", driverLapData.driver.driverId)// custom data to Specify the line
+          .attr("data-line", driverLapData.driver.driverId) // custom data to specify the line
           .attr("data-opacitychange", 1)
           .attr("data-highlighted", 0)
           .attr("data-elemtype", elemTypes.line)
@@ -91,6 +91,7 @@ function createLineGraph(containerId, raceData){
               .attr("cy", function(d, i) { return y(d.position) })
               .attr("r", linePointSize * 1.2)
               .on("click", handleClickOnPoint)
+              .on("dblclick", handleDoubleClickOnPoint)
               .on("mouseover", handleMouseOverLinePoint)
               .on("mouseout", handleMouseOutLinePoint);
           // Remove data from driverLapData, since we don't need a generic datapoint for this
@@ -129,6 +130,7 @@ function createLineGraph(containerId, raceData){
           .attr("cy", function(d, i) { return y(d.position) })
           .attr("r", linePointSize*2.4)
           .on("click", handleClickOnPoint)
+          .on("dblclick", handleDoubleClickOnPoint)
           .on("mouseover", handleMouseOverLinePoint)
           .on("mouseout", handleMouseOutLinePoint)
           .style("opacity", 0);
@@ -157,6 +159,7 @@ function createLineGraph(containerId, raceData){
             .attr("height", rectSize)
             .attr("width", rectSize)
             .on("click", handleClickOnPoint)
+            .on("dblclick", handleDoubleClickOnPoint)
             .on("mouseover", handleMouseOverLinePoint)
             .on("mouseout", handleMouseOutLinePoint);
 
@@ -199,6 +202,17 @@ function createLineGraph(containerId, raceData){
       .tickFormat("")
     );
 
+  // Add clickable ticklines so people can scale things
+  svg.append("g")
+    .attr("class", "grid")
+    .attr("transform", "translate(0," + height + ")")
+    .style("opacity", 0.5)
+    .call(d3.axisBottom(x)
+      .ticks(raceData.lapTimes.size) // One gridline for each lap
+      .tickSize(8)
+      .tickFormat("")
+    );
+
   svg.append("g")
       .call(
         d3.axisRight(y)
@@ -245,6 +259,11 @@ function createLineGraph(containerId, raceData){
       }
   }
 
+  function handleDoubleClickOnPoint(d,i){
+    var lapNr = d.lap;
+    console.log(["doubleClick", d.lap]);
+  }
+
   function handleMouseOverLinePoint(d, i) {
     var elemType = d3.select(this).attr("data-elemtype");
     //depending on Pitstop and lap different Texts