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

Enhance mouse experience

Browse Source
This commit is contained in:
Jan Philipp Timme 2017-12-29 16:28:34 +01:00
parent 4c99a50153
commit bbd92e3bda
1 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
js/diagrams.js
View File

@ -69,6 +69,7 @@ function createLineGraph(containerId, raceData){
.data(driverLapData.laps) .data(driverLapData.laps)
.enter().append("circle") // Uses the enter().append() method .enter().append("circle") // Uses the enter().append() method
.attr("class", "dot linedot") // Assign a class for styling .attr("class", "dot linedot") // Assign a class for styling
.attr("id", function(d, i) { return "circle-linepoint-" + d.lap + "-" + d.driverId; })
.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)
@ -76,6 +77,21 @@ 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);
//Appends a circle for each datapoint
svg.selectAll(".invisiblelinepoint")
.data(driverLapData.laps)
.enter().append("circle") // Uses the enter().append() method
.attr("class", "dot linedot") // Assign a class for styling
.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("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("click", handleClickOnPoint)
.on("mouseover", handleMouseOverLinePoint) .on("mouseover", handleMouseOverLinePoint)
.on("mouseout", handleMouseOutLinePoint) .on("mouseout", handleMouseOutLinePoint)
@ -194,13 +210,16 @@ function createLineGraph(containerId, raceData){
} }
function handleMouseOverLinePoint(d, i) { function handleMouseOverLinePoint(d, i) {
var circleId = "circle-linepoint-" + d.lap + "-" + d.driverId;
var circle = d3.select("#" + circleId);
// Add interactivity // Add interactivity
// Use D3 to select element, change color and size // Use D3 to select element, change color and size
if(!d.pitStop){ if(!d.pitStop){
d3.select(this) circle
.style("opacity", 1); .style("opacity", 1);
}else{ }else{
d3.select(this) circle
.attr("r", linePointSize * 2); .attr("r", linePointSize * 2);
} }
@ -228,13 +247,15 @@ function createLineGraph(containerId, raceData){
} }
function handleMouseOutLinePoint(d, i) { function handleMouseOutLinePoint(d, i) {
var circleId = "circle-linepoint-" + d.lap + "-" + d.driverId;
var circle = d3.select("#" + circleId);
// Use D3 to select element, change color back to normal // Use D3 to select element, change color back to normal
if(!d.pitStop){ if(!d.pitStop){
d3.select(this) circle
.attr("r", linePointSize) .attr("r", linePointSize)
.style("opacity", 0); .style("opacity", 0);
}else{ }else{
d3.select(this) circle
.attr("r", linePointSize); .attr("r", linePointSize);
} }