From b2934762e9799a56bdb688dfda9400645f41b8fd Mon Sep 17 00:00:00 2001 From: Jan Philipp Timme Date: Sun, 31 Dec 2017 01:17:20 +0100 Subject: [PATCH 1/5] Cleanup --- js/diagrams.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/js/diagrams.js b/js/diagrams.js index 8d399d0..562730d 100644 --- a/js/diagrams.js +++ b/js/diagrams.js @@ -86,18 +86,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") - .append("rect") - .attr("width", graphPosWidth.width) - .attr("height", graphPosWidth.height); var focus = svg.append("g") .attr("class", "focus") From 6292afec03207fc5ea37e1b9974b3eeab056ee28 Mon Sep 17 00:00:00 2001 From: Maschell Date: Sun, 31 Dec 2017 01:34:51 +0100 Subject: [PATCH 2/5] 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) From 94ea4257a278cf07af63f9fd72f41d5cffcd8f48 Mon Sep 17 00:00:00 2001 From: Maschell Date: Sun, 31 Dec 2017 01:38:18 +0100 Subject: [PATCH 3/5] Added credits --- js/diagrams.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/diagrams.js b/js/diagrams.js index 443a4da..b597a9e 100644 --- a/js/diagrams.js +++ b/js/diagrams.js @@ -1,6 +1,7 @@ "use strict"; // https://bl.ocks.org/mbostock/3884955 +// https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172 function createLineGraph(containerId, raceData){ // Rough input validation From cfd2f88c1610f8154c7819886fda1cfd71676c6e Mon Sep 17 00:00:00 2001 From: Jan Philipp Timme Date: Sun, 31 Dec 2017 01:48:35 +0100 Subject: [PATCH 4/5] Remove label for small xaxis completely --- js/diagrams.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/diagrams.js b/js/diagrams.js index b597a9e..badb1ba 100644 --- a/js/diagrams.js +++ b/js/diagrams.js @@ -105,10 +105,11 @@ function createLineGraph(containerId, raceData){ // ----------------------------------------------------------------------- + var contextXAxis = d3.axisBottom(x2).tickValues(0); context.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + smallGraphPosWidth.height + ")") - .call(d3.axisBottom(x2)); + .call(contextXAxis); context.append("g") .attr("class", "brush") From 44e8ccacfb624f805f91b75b3e2827d0340e7fef Mon Sep 17 00:00:00 2001 From: Jan Philipp Timme Date: Sun, 31 Dec 2017 01:55:20 +0100 Subject: [PATCH 5/5] Enable clipping for xAxis --- js/diagrams.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/diagrams.js b/js/diagrams.js index badb1ba..64f9900 100644 --- a/js/diagrams.js +++ b/js/diagrams.js @@ -134,7 +134,7 @@ function createLineGraph(containerId, raceData){ focus.append("path") .data([driverLapData.laps]) .attr("class", "line pathLines") - .attr("clip-path","url(#clip)") + .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) @@ -287,6 +287,7 @@ function createLineGraph(containerId, raceData){ focus.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + graphPosWidth.height + ")") + .attr("clip-path","url(#clip)") .call(xAxis); // Add the Y Axis on both sides