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

Add zoom to most displayed elements

Browse Source
This commit is contained in:
Jan Philipp Timme 2017-12-31 15:28:40 +01:00
parent 30a7e93e7e
commit fff6e7353e
1 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
js/diagrams.js
View File

@ -149,7 +149,8 @@ function createLineGraph(containerId, raceData){
.attr("data-highlighted", 0) .attr("data-highlighted", 0)
.attr("data-elemtype", elemTypes.line) .attr("data-elemtype", elemTypes.line)
.attr("stroke", getColorValue(driverIndex, enhancedLapData.length) ) .attr("stroke", getColorValue(driverIndex, enhancedLapData.length) )
.attr("d", lineDataDefinition); .attr("d", lineDataDefinition)
.call(zoom);
context.append("path") context.append("path")
.data([driverLapData.laps]) .data([driverLapData.laps])
@ -176,7 +177,8 @@ function createLineGraph(containerId, raceData){
.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) })
.attr("r", linePointSize) .attr("r", linePointSize)
.style("opacity", 0); .style("opacity", 0)
.call(zoom);
//Appends a circle for each datapoint //Appends a circle for each datapoint
focus.selectAll(".invisiblelinepoint") focus.selectAll(".invisiblelinepoint")
@ -196,7 +198,8 @@ function createLineGraph(containerId, raceData){
.on("click", handleClickOnPoint) .on("click", handleClickOnPoint)
.on("mouseover", handleMouseOverLinePoint) .on("mouseover", handleMouseOverLinePoint)
.on("mouseout", handleMouseOutLinePoint) .on("mouseout", handleMouseOutLinePoint)
.style("opacity", 0); .style("opacity", 0)
.call(zoom);
driverLapData.laps.forEach((singleLap, singleLapIndex)=> { driverLapData.laps.forEach((singleLap, singleLapIndex)=> {
//console.log(["driverLaps.forEach", singleLap, singleLapIndex]); //console.log(["driverLaps.forEach", singleLap, singleLapIndex]);
@ -217,7 +220,8 @@ function createLineGraph(containerId, raceData){
.attr("r", linePointSize * 1.4) .attr("r", linePointSize * 1.4)
.on("click", handleClickOnPoint) .on("click", handleClickOnPoint)
.on("mouseover", handleMouseOverLinePoint) .on("mouseover", handleMouseOverLinePoint)
.on("mouseout", handleMouseOutLinePoint); .on("mouseout", handleMouseOutLinePoint)
.call(zoom);
context.selectAll(".pitstoppoint-context") context.selectAll(".pitstoppoint-context")
.data([singleLap]) .data([singleLap])
@ -261,7 +265,8 @@ function createLineGraph(containerId, raceData){
.attr("width", rectSize) .attr("width", rectSize)
.on("click", handleClickOnPoint) .on("click", handleClickOnPoint)
.on("mouseover", handleMouseOverLinePoint) .on("mouseover", handleMouseOverLinePoint)
.on("mouseout", handleMouseOutLinePoint); .on("mouseout", handleMouseOutLinePoint)
.call(zoom);
context.selectAll(".endpoint") context.selectAll(".endpoint")
.data([driverLapData.laps[driverLapData.laps.length - 1]]) .data([driverLapData.laps[driverLapData.laps.length - 1]])