From bbd92e3bdacc490129449cc83a3639861fb63a97 Mon Sep 17 00:00:00 2001
From: Jan Philipp Timme <jan.philipp@timme.it>
Date: Fri, 29 Dec 2017 16:28:34 +0100
Subject: [PATCH] Enhance mouse experience

---
 js/diagrams.js | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/js/diagrams.js b/js/diagrams.js
index 0fc9488..7116e8f 100644
--- a/js/diagrams.js
+++ b/js/diagrams.js
@@ -69,6 +69,7 @@ function createLineGraph(containerId, raceData){
           .data(driverLapData.laps)
           .enter().append("circle") // Uses the enter().append() method
           .attr("class", "dot linedot") // Assign a class for styling
+          .attr("id", function(d, i) { return "circle-linepoint-" + d.lap + "-" + d.driverId; })
           .attr("data-line", driverLapData.driver.driverId)
           .attr("data-opacitychange", 0)
           .attr("data-highlighted", 0)
@@ -76,6 +77,21 @@ 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);
+
+      //Appends a circle for each datapoint
+      svg.selectAll(".invisiblelinepoint")
+          .data(driverLapData.laps)
+          .enter().append("circle") // Uses the enter().append() method
+          .attr("class", "dot linedot") // Assign a class for styling
+          .attr("circle-id", function(d, i) { return "circle-linepoint-" + d.lap + "-" + d.driverId; })
+          .attr("data-line", driverLapData.driver.driverId)
+          .attr("data-opacitychange", 0)
+          .attr("data-highlighted", 0)
+          .attr("fill", getColorValue(driverIndex, enhancedLapData.length))
+          .attr("cx", function(d, i) {return x(d.lap) })
+          .attr("cy", function(d, i) { return y(d.position) })
+          .attr("r", linePointSize*2.4)
           .on("click", handleClickOnPoint)
           .on("mouseover", handleMouseOverLinePoint)
           .on("mouseout", handleMouseOutLinePoint)
@@ -194,13 +210,16 @@ function createLineGraph(containerId, raceData){
   }
 
   function handleMouseOverLinePoint(d, i) {
+    var circleId = "circle-linepoint-" + d.lap + "-" + d.driverId;
+    var circle = d3.select("#" + circleId);
+
     // Add interactivity
     // Use D3 to select element, change color and size
     if(!d.pitStop){
-      d3.select(this)
+      circle
         .style("opacity", 1);
     }else{
-      d3.select(this)
+      circle
         .attr("r", linePointSize * 2);
     }
 
@@ -228,13 +247,15 @@ function createLineGraph(containerId, raceData){
   }
 
   function handleMouseOutLinePoint(d, i) {
+    var circleId = "circle-linepoint-" + d.lap + "-" + d.driverId;
+    var circle = d3.select("#" + circleId);
     // Use D3 to select element, change color back to normal
     if(!d.pitStop){
-      d3.select(this)
+      circle
         .attr("r", linePointSize)
         .style("opacity", 0);
     }else{
-      d3.select(this)
+      circle
         .attr("r", linePointSize);
     }