From fff6e7353e9f303ae8e7d7a979bf9b37e529da52 Mon Sep 17 00:00:00 2001
From: Jan Philipp Timme <jan.philipp@timme.it>
Date: Sun, 31 Dec 2017 15:28:40 +0100
Subject: [PATCH] Add zoom to most displayed elements

---
 js/diagrams.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/js/diagrams.js b/js/diagrams.js
index 656affa..771d57a 100644
--- a/js/diagrams.js
+++ b/js/diagrams.js
@@ -149,7 +149,8 @@ function createLineGraph(containerId, raceData){
           .attr("data-highlighted", 0)
           .attr("data-elemtype", elemTypes.line)
           .attr("stroke", getColorValue(driverIndex, enhancedLapData.length) )
-          .attr("d", lineDataDefinition);
+          .attr("d", lineDataDefinition)
+          .call(zoom);
 
       context.append("path")
           .data([driverLapData.laps])
@@ -176,7 +177,8 @@ function createLineGraph(containerId, raceData){
           .attr("cx", function(d, i) {return x(d.lap) })
           .attr("cy", function(d, i) { return y(d.position) })
           .attr("r", linePointSize)
-          .style("opacity", 0);
+          .style("opacity", 0)
+          .call(zoom);
 
       //Appends a circle for each datapoint
       focus.selectAll(".invisiblelinepoint")
@@ -196,7 +198,8 @@ function createLineGraph(containerId, raceData){
           .on("click", handleClickOnPoint)
           .on("mouseover", handleMouseOverLinePoint)
           .on("mouseout", handleMouseOutLinePoint)
-          .style("opacity", 0);
+          .style("opacity", 0)
+          .call(zoom);
 
       driverLapData.laps.forEach((singleLap, singleLapIndex)=> {
         //console.log(["driverLaps.forEach", singleLap, singleLapIndex]);
@@ -217,7 +220,8 @@ function createLineGraph(containerId, raceData){
               .attr("r", linePointSize * 1.4)
               .on("click", handleClickOnPoint)
               .on("mouseover", handleMouseOverLinePoint)
-              .on("mouseout", handleMouseOutLinePoint);
+              .on("mouseout", handleMouseOutLinePoint)
+              .call(zoom);
 
           context.selectAll(".pitstoppoint-context")
               .data([singleLap])
@@ -261,7 +265,8 @@ function createLineGraph(containerId, raceData){
             .attr("width", rectSize)
             .on("click", handleClickOnPoint)
             .on("mouseover", handleMouseOverLinePoint)
-            .on("mouseout", handleMouseOutLinePoint);
+            .on("mouseout", handleMouseOutLinePoint)
+            .call(zoom);
 
         context.selectAll(".endpoint")
             .data([driverLapData.laps[driverLapData.laps.length - 1]])