diff --git a/js/diagrams.js b/js/diagrams.js index eb0b00e..9e4b1bf 100644 --- a/js/diagrams.js +++ b/js/diagrams.js @@ -4,7 +4,7 @@ function createLineGraph(containerId, raceData){ // Rough input validation - if(raceData.raceInfo === undefined) { + if(raceData === undefined || raceData.raceInfo === undefined) { console.error(["Sorry, that raceData is empty. :-(", raceData]); return; // early return to avoid errors } else { @@ -97,6 +97,7 @@ function createLineGraph(containerId, raceData){ .attr("data-line", driverLapData.driver.driverId) .attr("data-opacitychange", 0) .attr("data-highlighted", 0) + .attr("data-elemtype", elemTypes.linepoint) .attr("fill", getColorValue(driverIndex, enhancedLapData.length)) .attr("cx", function(d, i) {return x(d.lap) }) .attr("cy", function(d, i) { return y(d.position) }) @@ -108,6 +109,7 @@ function createLineGraph(containerId, raceData){ driverLapData.laps.forEach((singleLap, singleLapIndex)=> { if(singleLap.pitStop){ + console.log("Got a pitstop"); //Appends a circle for each datapoint svg.selectAll(".pitstoppoint") .data([singleLap]) @@ -229,7 +231,7 @@ function createLineGraph(containerId, raceData){ 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 var textArr = []; var circleId = "circle-linepoint-" + d.lap + "-" + d.driverId; @@ -237,15 +239,15 @@ function createLineGraph(containerId, raceData){ // Add interactivity // Use D3 to select element, change color and size - if(dataType === elemTypes.linepoint){ + if(elemType === elemTypes.linepoint){ circle .style("opacity", 1); textArr = getLapTextArray(raceData,d); - }else if(dataType === elemTypes.pitstoppoint){ + }else if(elemType === elemTypes.pitstoppoint){ circle .attr("r", linePointSize * 2); textArr = getPitStopTextArray(raceData,d); - }else if(dataType === elemTypes.endpoint){ + }else if(elemType === elemTypes.endpoint){ d3.select(this) .attr("height", rectSize * 1.3) .attr("width", rectSize * 1.3); diff --git a/js/main.js b/js/main.js index 8dae758..dca3e5e 100644 --- a/js/main.js +++ b/js/main.js @@ -12,15 +12,15 @@ var slyelement = { horizontal: 1, itemNav: 'basic', smart: 1, - activateOn: 'click', - mouseDragging: 1, + //activateOn: 'click', + //activatePageOn: 'click', + mouseDragging: 0, touchDragging: 1, - releaseSwing: 1, + releaseSwing: 0, startAt: 3, scrollBar: $('.strecken-selector').parent().find('.scrollbar'), scrollBy: 1, pagesBar: $('.strecken-selector').parent().find('.pages'), - activatePageOn: 'click', speed: 300, elasticBounds: 1, dragHandle: 1, @@ -60,16 +60,17 @@ preprocessor.load(function(data) { + "" + raceD1.raceInfo.date.toLocaleDateString("en-US") + ""); + $("#courseSelection li").click(function(event) { + var raceI = event.currentTarget.attributes.data.value; + var rdata = slyelement.curRaces.filter(r => r.raceInfo.raceId == raceI)[0]; + $("#lineGraphBox").empty(); + createLineGraph("#lineGraphBox", rdata); + }); slyelement.obj.reload(); }); } - $("#courseSelection li").click(function(event) { - var raceI = event.target.attributes.data.value; - var rdata = slyelement.curRaces.filter(r => r.raceInfo.raceId == raceI)[0]; - $("#lineGraphBox").empty(); - createLineGraph("#lineGraphBox", rdata); - }); + slyelement.obj.reload(); });