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;
}
.area {
fill: steelblue;
clip-path: url(#clip);
}
.zoom {
cursor: move;
fill: none;

26
js/diagrams.js
View File

@ -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
@ -86,23 +87,17 @@ 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);*/
// make sure we have no overlapping
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")
.attr("transform", "translate(" + graphPosWidth.posX + "," + graphPosWidth.posY + ")");
var context = svg.append("g")
.attr("class", "context")
.attr("height", smallGraphPosWidth.height)
@ -110,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")
@ -138,7 +134,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)
@ -163,6 +160,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)
@ -198,6 +196,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)
@ -214,6 +213,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)
@ -240,6 +240,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)
@ -257,7 +258,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)
@ -286,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