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

Put pitstop points over generic linepoints

Browse Source
This commit is contained in:
Jan Philipp Timme 2017-12-31 14:46:34 +01:00
parent f77c22a625
commit e66c41a64e
1 changed files with 37 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
js/diagrams.js
View File

@ -154,6 +154,43 @@ function createLineGraph(containerId, raceData){
.attr("stroke", getColorValue(driverIndex, enhancedLapData.length) )
.attr("d", lineDataDefinitionSmall);
//Appends a circle for each datapoint
focus.selectAll(".linepoint")
.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)
.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) })
.attr("r", linePointSize)
.style("opacity", 0);
//Appends a circle for each datapoint
focus.selectAll(".invisiblelinepoint")
.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)
.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) })
.attr("r", linePointSize*2.4)
.on("click", handleClickOnPoint)
.on("mouseover", handleMouseOverLinePoint)
.on("mouseout", handleMouseOutLinePoint)
.style("opacity", 0);
driverLapData.laps.forEach((singleLap, singleLapIndex)=> {
//console.log(["driverLaps.forEach", singleLap, singleLapIndex]);
if(singleLap.pitStop){
@ -193,43 +230,6 @@ function createLineGraph(containerId, raceData){
}
});
//Appends a circle for each datapoint
focus.selectAll(".linepoint")
.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)
.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) })
.attr("r", linePointSize)
.style("opacity", 0);
//Appends a circle for each datapoint
focus.selectAll(".invisiblelinepoint")
.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)
.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) })
.attr("r", linePointSize*2.4)
.on("click", handleClickOnPoint)
.on("mouseover", handleMouseOverLinePoint)
.on("mouseout", handleMouseOutLinePoint)
.style("opacity", 0);
// in case the driver ended the race too early, get the status why he quit
/*TODO: Mouseover for Rectangle*/
var resultOfDriver = raceData.results.filter((result) => { return result.driverId == driverLapData.driver.driverId; });