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

Fix courseselection

Browse Source
This commit is contained in:
Jan Philipp Timme 2017-12-29 17:11:02 +01:00
parent 887c438d20
commit daa5246179
2 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
js/diagrams.js
View File

@ -4,7 +4,7 @@
function createLineGraph(containerId, raceData){ function createLineGraph(containerId, raceData){
// Rough input validation // Rough input validation
if(raceData.raceInfo === undefined) { if(raceData === undefined || raceData.raceInfo === undefined) {
console.error(["Sorry, that raceData is empty. :-(", raceData]); console.error(["Sorry, that raceData is empty. :-(", raceData]);
return; // early return to avoid errors return; // early return to avoid errors
} else { } else {
@ -97,6 +97,7 @@ function createLineGraph(containerId, raceData){
.attr("data-line", driverLapData.driver.driverId) .attr("data-line", driverLapData.driver.driverId)
.attr("data-opacitychange", 0) .attr("data-opacitychange", 0)
.attr("data-highlighted", 0) .attr("data-highlighted", 0)
.attr("data-elemtype", elemTypes.linepoint)
.attr("fill", getColorValue(driverIndex, enhancedLapData.length)) .attr("fill", getColorValue(driverIndex, enhancedLapData.length))
.attr("cx", function(d, i) {return x(d.lap) }) .attr("cx", function(d, i) {return x(d.lap) })
.attr("cy", function(d, i) { return y(d.position) }) .attr("cy", function(d, i) { return y(d.position) })
@ -108,6 +109,7 @@ function createLineGraph(containerId, raceData){
driverLapData.laps.forEach((singleLap, singleLapIndex)=> { driverLapData.laps.forEach((singleLap, singleLapIndex)=> {
if(singleLap.pitStop){ if(singleLap.pitStop){
console.log("Got a pitstop");
//Appends a circle for each datapoint //Appends a circle for each datapoint
svg.selectAll(".pitstoppoint") svg.selectAll(".pitstoppoint")
.data([singleLap]) .data([singleLap])
@ -229,7 +231,7 @@ function createLineGraph(containerId, raceData){
function handleMouseOverLinePoint(d, i) { function handleMouseOverLinePoint(d, i) {
var dataType = d3.select(this).attr("data-elemtype"); var elemType = d3.select(this).attr("data-elemtype");
//depending on Pitstop and lap different Texts //depending on Pitstop and lap different Texts
var textArr = []; var textArr = [];
var circleId = "circle-linepoint-" + d.lap + "-" + d.driverId; var circleId = "circle-linepoint-" + d.lap + "-" + d.driverId;
@ -237,15 +239,15 @@ function createLineGraph(containerId, raceData){
// Add interactivity // Add interactivity
// Use D3 to select element, change color and size // Use D3 to select element, change color and size
if(dataType === elemTypes.linepoint){ if(elemType === elemTypes.linepoint){
circle circle
.style("opacity", 1); .style("opacity", 1);
textArr = getLapTextArray(raceData,d); textArr = getLapTextArray(raceData,d);
}else if(dataType === elemTypes.pitstoppoint){ }else if(elemType === elemTypes.pitstoppoint){
circle circle
.attr("r", linePointSize * 2); .attr("r", linePointSize * 2);
textArr = getPitStopTextArray(raceData,d); textArr = getPitStopTextArray(raceData,d);
}else if(dataType === elemTypes.endpoint){ }else if(elemType === elemTypes.endpoint){
d3.select(this) d3.select(this)
.attr("height", rectSize * 1.3) .attr("height", rectSize * 1.3)
.attr("width", rectSize * 1.3); .attr("width", rectSize * 1.3);

19
js/main.js
View File

@ -12,15 +12,15 @@ var slyelement = {
horizontal: 1, horizontal: 1,
itemNav: 'basic', itemNav: 'basic',
smart: 1, smart: 1,
activateOn: 'click', //activateOn: 'click',
mouseDragging: 1, //activatePageOn: 'click',
mouseDragging: 0,
touchDragging: 1, touchDragging: 1,
releaseSwing: 1, releaseSwing: 0,
startAt: 3, startAt: 3,
scrollBar: $('.strecken-selector').parent().find('.scrollbar'), scrollBar: $('.strecken-selector').parent().find('.scrollbar'),
scrollBy: 1, scrollBy: 1,
pagesBar: $('.strecken-selector').parent().find('.pages'), pagesBar: $('.strecken-selector').parent().find('.pages'),
activatePageOn: 'click',
speed: 300, speed: 300,
elasticBounds: 1, elasticBounds: 1,
dragHandle: 1, dragHandle: 1,
@ -60,12 +60,8 @@ preprocessor.load(function(data) {
+ "</div>" + "</div>"
+ raceD1.raceInfo.date.toLocaleDateString("en-US") + + raceD1.raceInfo.date.toLocaleDateString("en-US") +
"</li>"); "</li>");
slyelement.obj.reload();
});
}
$("#courseSelection li").click(function(event) { $("#courseSelection li").click(function(event) {
var raceI = event.target.attributes.data.value; var raceI = event.currentTarget.attributes.data.value;
var rdata = slyelement.curRaces.filter(r => r.raceInfo.raceId == raceI)[0]; var rdata = slyelement.curRaces.filter(r => r.raceInfo.raceId == raceI)[0];
$("#lineGraphBox").empty(); $("#lineGraphBox").empty();
createLineGraph("#lineGraphBox", rdata); createLineGraph("#lineGraphBox", rdata);
@ -73,6 +69,11 @@ preprocessor.load(function(data) {
slyelement.obj.reload(); slyelement.obj.reload();
}); });
}
slyelement.obj.reload();
});
$(window).resize(function(e) { $(window).resize(function(e) {
slyelement.obj.reload(); slyelement.obj.reload();
}); });