- Removed the unneeded area/area2 function

- The x axis does now scale correct
- The circle/point also scale
- code cleanup
- Fixed background grid

js/diagrams.js

@@ -33,7 +33,7 @@ function createLineGraph(containerId, raceData){
 
 // -----------------------------------------------------------------------
   // set the dimensions and margins of the graph
-  var marginGraph = {top: 28.8, right: 28.8, bottom: 10, left: 57.6},
+  var marginGraph = {top: 30.0, right: 50, bottom: 10, left: 50.0},
       marginSmallGraph = {top: 10, right: marginGraph.right, bottom: 50, left: marginGraph.left},
       graphPosWidth = {posX: marginGraph.left, posY: marginGraph.top, width: svgWidth - (marginGraph.left + marginGraph.right), height : graphHeight, totalHeight: marginGraph.top + graphHeight + marginGraph.bottom},
       smallGraphPosWidth = {posX: marginSmallGraph.left, posY: graphPosWidth.totalHeight + graphPosWidth.posY + marginSmallGraph.top, width: svgWidth - (marginSmallGraph.left + marginSmallGraph.right), height : smallGraphHeight , totalHeight: marginSmallGraph.top + smallGraphHeight + marginSmallGraph.bottom},
@@ -54,23 +54,11 @@ function createLineGraph(containerId, raceData){
     .on("brush end", brushed);
 
   var zoom = d3.zoom()
-    .scaleExtent([1, 10])
+    .scaleExtent([1, 5])
     .translateExtent([[0, 0], [graphPosWidth.width, graphPosWidth.height]])
     .extent([[0, 0], [graphPosWidth.width, graphPosWidth.height]])
     .on("zoom", zoomed);
 	  
-  var area = d3.area()
-      .curve(d3.curveMonotoneX)
-      .x(function(d) { return x(d.lap); })
-      .y0(graphPosWidth.height)
-      .y1(function(d) { return y(d.position); });
-
-  var area2 = d3.area()
-      .curve(d3.curveMonotoneX)
-      .x(function(d) { return x2(d.lap); })
-      .y0(smallGraphPosWidth.height)
-      .y1(function(d) { return y2(d.position); });
-
 // -----------------------------------------------------------------------
 
   // defines how the passed in Data, at "svg.append" shall be interpreted
@@ -78,6 +66,10 @@ function createLineGraph(containerId, raceData){
     .x(function(d) { return x(d.lap); })
     .y(function(d) { return y(d.position); });
 	
+  var lineDataDefinitionSmall = d3.line()
+    .x(function(d) { return x2(d.lap); })
+    .y(function(d) { return y2(d.position); });
+
   // append the svg obgect to the body of the page
   // appends a 'group' element to 'svg'
   // moves the 'group' element to the top left margin
@@ -100,7 +92,6 @@ function createLineGraph(containerId, raceData){
       .attr("height", smallGraphPosWidth.height)
       .attr("transform", "translate(" + smallGraphPosWidth.posX + "," + smallGraphPosWidth.posY + ")");
 
-
   // -----------------------------------------------------------------------
 
   // Scale the range of the data
@@ -112,12 +103,13 @@ function createLineGraph(containerId, raceData){
   var enhancedLapData = processor.getEnhancedLapDataPerDriver(raceData);
   //console.log(["enhancedLapData", enhancedLapData]);
 
+	
   // Adds all lines
   enhancedLapData.forEach((driverLapData, driverIndex) => {
     //console.log(driverLapData);
       focus.append("path")
           .data([driverLapData.laps])
-          .attr("class", "line zoomable")
+          .attr("class", "line pathLines")
           .attr("data-line", driverLapData.driver.driverId) // custom data to specify the line
           .attr("data-opacitychange", 1)
           .attr("data-highlighted", 0)
@@ -127,13 +119,13 @@ function createLineGraph(containerId, raceData){
 
       context.append("path")
           .data([driverLapData.laps])
-          .attr("class", "line-context zoomable")
+          .attr("class", "line-context")
           .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)
           .attr("stroke", getColorValue(driverIndex, enhancedLapData.length) )
-          .attr("d", area2);
+          .attr("d", lineDataDefinitionSmall);
 
       driverLapData.laps.forEach((singleLap, singleLapIndex)=> {
         //console.log(["driverLaps.forEach", singleLap, singleLapIndex]);
@@ -142,7 +134,7 @@ function createLineGraph(containerId, raceData){
           focus.selectAll(".pitstoppoint")
               .data([singleLap])
               .enter().append("circle") // Uses the enter().append() method
-              .attr("class", "dot pitstopdot zoomable") // Assign a class for styling
+              .attr("class", "pitstopdot") // Assign a class for styling
               .attr("data-line", driverLapData.driver.driverId)
               .attr("data-opacitychange", 1)
               .attr("data-highlighted", 0)
@@ -159,7 +151,7 @@ function createLineGraph(containerId, raceData){
           context.selectAll(".pitstoppoint-context")
               .data([singleLap])
               .enter().append("circle") // Uses the enter().append() method
-              .attr("class", "dot pitstopdot zoomable") // Assign a class for styling
+              .attr("class", "pitstopdot") // Assign a class for styling
               .attr("data-line", driverLapData.driver.driverId)
               .attr("data-opacitychange", 1)
               .attr("data-highlighted", 0)
@@ -168,7 +160,7 @@ function createLineGraph(containerId, raceData){
               .attr("cx", function(d, i) {return x2(d.lap) })
               .attr("cy", function(d, i) { return y2(d.position) })
               .attr("r", linePointSize * 0.5)
-              .attr("d", area2);
+              .attr("d", lineDataDefinitionSmall);
           // Remove data from driverLapData, since we don't need a generic datapoint for this
           driverLapData.laps[singleLapIndex] = {};
         }
@@ -178,7 +170,7 @@ function createLineGraph(containerId, raceData){
       focus.selectAll(".linepoint")
           .data(driverLapData.laps)
           .enter().append("circle") // Uses the enter().append() method
-          .attr("class", "dot linedot zoomable") // Assign a class for styling
+          .attr("class", "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)
@@ -194,7 +186,7 @@ function createLineGraph(containerId, raceData){
       focus.selectAll(".invisiblelinepoint")
           .data(driverLapData.laps)
           .enter().append("circle") // Uses the enter().append() method
-          .attr("class", "dot linedot zoomable") // Assign a class for styling
+          .attr("class", "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)
@@ -221,8 +213,7 @@ function createLineGraph(containerId, raceData){
         focus.selectAll(".endpoint")
             .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", "endpointdot") // Assign a class for styling
-            .attr("class", "zoomable")
             .attr("data-line", driverLapData.driver.driverId)
             .attr("data-opacitychange", 1)
             .attr("data-highlighted", 0)
@@ -251,7 +242,7 @@ function createLineGraph(containerId, raceData){
             .attr("y", function(d, i) { return y2(d.position) - rectSize * 1/2; })
             .attr("height", rectSize * 0.4)
             .attr("width", rectSize * 0.4)
-            .attr("d", area2);
+            .attr("d", lineDataDefinition);
 
         /* tried with Cross, didn't work, don't  know why
         svg.selectAll(".endpoint")
@@ -267,7 +258,8 @@ function createLineGraph(containerId, raceData){
   });
 
   // Add the X Axis
-  var xAxis1 = focus.append("g")
+  focus.append("g")
+	  .attr("class", "axis axis--x")
       .attr("transform", "translate(0," + graphPosWidth.height + ")")
       .call(d3.axisBottom(x));
 
@@ -282,8 +274,8 @@ function createLineGraph(containerId, raceData){
     );
 
   // Add gridlines on x axis to better figure out laps
-  var xAxis2 = focus.append("g")
+  focus.append("g")
-    .attr("class", "grid")
+    .attr("class", "grid axis axis--x")
     .attr("transform", "translate(0," + graphPosWidth.height + ")")
     .style("opacity", 0.06)
     .call(d3.axisBottom(x)
@@ -293,8 +285,8 @@ function createLineGraph(containerId, raceData){
     );
 
   // Add clickable ticklines so people can scale things
-  var xAxis3 = focus.append("g")
+  focus.append("g")
-    .attr("class", "grid")
+    .attr("class", "grid axis axis--x")
     .attr("transform", "translate(0," + graphPosWidth.height + ")")
     .style("opacity", 0.5)
     .call(d3.axisBottom(x)
@@ -303,6 +295,7 @@ function createLineGraph(containerId, raceData){
       .tickFormat("")
     );
 
+	//Add driver information on the right side of the graph.
   focus.append("g")
       .call(
         d3.axisRight(y)
@@ -515,8 +508,11 @@ function createLineGraph(containerId, raceData){
     if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
     var s = d3.event.selection || x2.range();
     x.domain(s.map(x2.invert, x2));
-    focus.selectAll(".zoomable").attr("d", area);
+	
-    focus.selectAll(".axis--x").call(xAxis);
+	//Update the x axis data
+    focus.select(".axis--x").call(xAxis);
+	
+	//Update the "preview" rectangle
     svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
       .scale(graphPosWidth.width / (s[1] - s[0]))
       .translate(-s[0], 0));
@@ -525,14 +521,21 @@ function createLineGraph(containerId, raceData){
   function zoomed() {
     if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
     var t = d3.event.transform;
+	
 	x.domain(t.rescaleX(x2).domain());
-    focus.selectAll(".zoomable").attr("d", area);
-    focus.selectAll(".axis--x").call(xAxis);
 	
-	xAxis1.call(xAxis.scale(d3.event.transform.rescaleX(x)));
+	//scale the path axis
-	xAxis2.call(xAxis.scale(d3.event.transform.rescaleX(x)));
+    focus.selectAll(".pathLines").call(xAxis);
-	xAxis3.call(xAxis.scale(d3.event.transform.rescaleX(x)));
 	
+	//update the data!!
+    focus.selectAll(".pathLines").attr("d", lineDataDefinition);
+	focus.selectAll(".pitstopdot").attr("cx", function(d, i) {return x(d.lap) });
+	focus.selectAll(".endpointdot").attr("x", function(d, i) { return x(d.lap) - rectSize * 1/2; });
+
+	//Update x-axis
+	focus.select(".axis--x").call(xAxis);
+	
+	//call the brush function
     context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
   }