Hochschulprojekte
/
f1vis
0
0
Fork 0
Code Issues Pull Requests Activity

Merge branch 'master' of https://github.com/F1Vis/f1vis 

Added loading Screen
This commit is contained in:
sirsandmann 2017-12-31 02:37:32 +01:00
parent 34b9d69a46 44e8ccacfb
commit 3189d7ac5c
2 changed files with 14 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/main.css
View File

@ -90,11 +90,6 @@ body {
padding-left: 1.25rem; padding-left: 1.25rem;
} }
.area {
fill: steelblue;
clip-path: url(#clip);
}
.zoom { .zoom {
cursor: move; cursor: move;
fill: none; fill: none;

18
js/diagrams.js
View File

@ -1,6 +1,7 @@
"use strict"; "use strict";
// https://bl.ocks.org/mbostock/3884955 // https://bl.ocks.org/mbostock/3884955
// https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172
function createLineGraph(containerId, raceData){ function createLineGraph(containerId, raceData){
// Rough input validation // Rough input validation
@ -86,13 +87,7 @@ function createLineGraph(containerId, raceData){
.attr("height", svgHeight); .attr("height", svgHeight);
//---------------------------------------------------------------------- //----------------------------------------------------------------------
/*svg.append("rect") // make sure we have no overlapping
.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") svg.append("defs").append("clipPath")
.attr("id", "clip") .attr("id", "clip")
.append("rect") .append("rect")
@ -110,10 +105,11 @@ function createLineGraph(containerId, raceData){
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
var contextXAxis = d3.axisBottom(x2).tickValues(0);
context.append("g") context.append("g")
.attr("class", "axis axis--x") .attr("class", "axis axis--x")
.attr("transform", "translate(0," + smallGraphPosWidth.height + ")") .attr("transform", "translate(0," + smallGraphPosWidth.height + ")")
.call(d3.axisBottom(x2)); .call(contextXAxis);
context.append("g") context.append("g")
.attr("class", "brush") .attr("class", "brush")
@ -138,6 +134,7 @@ function createLineGraph(containerId, raceData){
focus.append("path") focus.append("path")
.data([driverLapData.laps]) .data([driverLapData.laps])
.attr("class", "line pathLines") .attr("class", "line pathLines")
.attr("clip-path","url(#clip)")
.attr("data-line", driverLapData.driver.driverId) // custom data to specify the line .attr("data-line", driverLapData.driver.driverId) // custom data to specify the line
.attr("data-opacitychange", 1) .attr("data-opacitychange", 1)
.attr("data-highlighted", 0) .attr("data-highlighted", 0)
@ -163,6 +160,7 @@ function createLineGraph(containerId, raceData){
.data([singleLap]) .data([singleLap])
.enter().append("circle") // Uses the enter().append() method .enter().append("circle") // Uses the enter().append() method
.attr("class", "pitstopdot") // Assign a class for styling .attr("class", "pitstopdot") // Assign a class for styling
.attr("clip-path","url(#clip)")
.attr("data-line", driverLapData.driver.driverId) .attr("data-line", driverLapData.driver.driverId)
.attr("data-opacitychange", 1) .attr("data-opacitychange", 1)
.attr("data-highlighted", 0) .attr("data-highlighted", 0)
@ -198,6 +196,7 @@ function createLineGraph(containerId, raceData){
.data(driverLapData.laps) .data(driverLapData.laps)
.enter().append("circle") // Uses the enter().append() method .enter().append("circle") // Uses the enter().append() method
.attr("class", "linedot") // Assign a class for styling .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("id", function(d, i) { return "circle-linepoint-" + d.lap + "-" + d.driverId; })
.attr("data-line", driverLapData.driver.driverId) .attr("data-line", driverLapData.driver.driverId)
.attr("data-opacitychange", 0) .attr("data-opacitychange", 0)
@ -214,6 +213,7 @@ function createLineGraph(containerId, raceData){
.data(driverLapData.laps) .data(driverLapData.laps)
.enter().append("circle") // Uses the enter().append() method .enter().append("circle") // Uses the enter().append() method
.attr("class", "linedot") // Assign a class for styling .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("circle-id", function(d, i) { return "circle-linepoint-" + d.lap + "-" + d.driverId; })
.attr("data-line", driverLapData.driver.driverId) .attr("data-line", driverLapData.driver.driverId)
.attr("data-opacitychange", 0) .attr("data-opacitychange", 0)
@ -240,6 +240,7 @@ function createLineGraph(containerId, raceData){
.data([driverLapData.laps[driverLapData.laps.length - 1]]) .data([driverLapData.laps[driverLapData.laps.length - 1]])
.enter().append("rect") // Uses the enter().append() method .enter().append("rect") // Uses the enter().append() method
.attr("class", "endpointdot") // Assign a class for styling .attr("class", "endpointdot") // Assign a class for styling
.attr("clip-path","url(#clip)")
.attr("data-line", driverLapData.driver.driverId) .attr("data-line", driverLapData.driver.driverId)
.attr("data-opacitychange", 1) .attr("data-opacitychange", 1)
.attr("data-highlighted", 0) .attr("data-highlighted", 0)
@ -286,6 +287,7 @@ function createLineGraph(containerId, raceData){
focus.append("g") focus.append("g")
.attr("class", "axis axis--x") .attr("class", "axis axis--x")
.attr("transform", "translate(0," + graphPosWidth.height + ")") .attr("transform", "translate(0," + graphPosWidth.height + ")")
.attr("clip-path","url(#clip)")
.call(xAxis); .call(xAxis);
// Add the Y Axis on both sides // Add the Y Axis on both sides