From 6292afec03207fc5ea37e1b9974b3eeab056ee28 Mon Sep 17 00:00:00 2001
From: Maschell <Maschell@gmx.de>
Date: Sun, 31 Dec 2017 01:34:51 +0100
Subject: [PATCH] Make sure the lines don't overlap any other things.

---
 css/main.css   |  5 -----
 js/diagrams.js | 18 +++++++++---------
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/css/main.css b/css/main.css
index 2066c87..ccd7bb9 100644
--- a/css/main.css
+++ b/css/main.css
@@ -90,11 +90,6 @@ body {
   padding-left: 1.25rem;
 }
 
-.area {
-  fill: steelblue;
-  clip-path: url(#clip);
-}
-
 .zoom {
   cursor: move;
   fill: none;
diff --git a/js/diagrams.js b/js/diagrams.js
index 0ae0d15..5c8b972 100644
--- a/js/diagrams.js
+++ b/js/diagrams.js
@@ -82,12 +82,6 @@ function createLineGraph(containerId, raceData){
       .attr("height", svgHeight);
 
   //----------------------------------------------------------------------
-  /*svg.append("rect")
-      .attr("class", "zoom")
-      .attr("width", graphPosWidth.width)
-      .attr("height", graphPosWidth.height)
-      .attr("transform", "translate(" + graphPosWidth.posX + "," + graphPosWidth.posY + ")")
-      .call(zoom);*/
 
   svg.append("defs").append("clipPath")
     .attr("id", "clip")
@@ -95,10 +89,11 @@ function createLineGraph(containerId, raceData){
       .attr("width", graphPosWidth.width)
       .attr("height", graphPosWidth.height);
 
+	  
   var focus = svg.append("g")
       .attr("class", "focus")
       .attr("transform", "translate(" + graphPosWidth.posX + "," + graphPosWidth.posY + ")");
-
+	  
   var context = svg.append("g")
       .attr("class", "context")
       .attr("height", smallGraphPosWidth.height)
@@ -134,7 +129,8 @@ function createLineGraph(containerId, raceData){
       focus.append("path")
           .data([driverLapData.laps])
           .attr("class", "line pathLines")
-          .attr("data-line", driverLapData.driver.driverId) // custom data to specify the line
+		  .attr("clip-path","url(#clip)")
+          .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)
@@ -159,6 +155,7 @@ function createLineGraph(containerId, raceData){
               .data([singleLap])
               .enter().append("circle") // Uses the enter().append() method
               .attr("class", "pitstopdot") // Assign a class for styling
+			  .attr("clip-path","url(#clip)")
               .attr("data-line", driverLapData.driver.driverId)
               .attr("data-opacitychange", 1)
               .attr("data-highlighted", 0)
@@ -194,6 +191,7 @@ function createLineGraph(containerId, raceData){
           .data(driverLapData.laps)
           .enter().append("circle") // Uses the enter().append() method
           .attr("class", "linedot") // Assign a class for styling
+		  .attr("clip-path","url(#clip)")
           .attr("id", function(d, i) { return "circle-linepoint-" + d.lap + "-" + d.driverId; })
           .attr("data-line", driverLapData.driver.driverId)
           .attr("data-opacitychange", 0)
@@ -210,6 +208,7 @@ function createLineGraph(containerId, raceData){
           .data(driverLapData.laps)
           .enter().append("circle") // Uses the enter().append() method
           .attr("class", "linedot") // Assign a class for styling
+		  .attr("clip-path","url(#clip)")
           .attr("circle-id", function(d, i) { return "circle-linepoint-" + d.lap + "-" + d.driverId; })
           .attr("data-line", driverLapData.driver.driverId)
           .attr("data-opacitychange", 0)
@@ -236,6 +235,7 @@ function createLineGraph(containerId, raceData){
             .data([driverLapData.laps[driverLapData.laps.length - 1]])
             .enter().append("rect") // Uses the enter().append() method
             .attr("class", "endpointdot") // Assign a class for styling
+			.attr("clip-path","url(#clip)")
             .attr("data-line", driverLapData.driver.driverId)
             .attr("data-opacitychange", 1)
             .attr("data-highlighted", 0)
@@ -253,7 +253,7 @@ function createLineGraph(containerId, raceData){
             .data([driverLapData.laps[driverLapData.laps.length - 1]])
             .enter().append("rect") // Uses the enter().append() method
             //.attr("class", "endpoint") // Assign a class for styling
-            .attr("class", "zoomable")
+            .attr("class", "zoomable")			
             .attr("data-line", driverLapData.driver.driverId)
             .attr("data-opacitychange", 1)
             .attr("data-highlighted", 0)