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

Fix missing animations on point mouse events

Browse Source
This commit is contained in:
Jan Philipp Timme 2017-12-30 12:33:11 +01:00
parent db5a018638
commit ecf4a56125
1 changed files with 8 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
js/diagrams.js
View File

@ -235,27 +235,25 @@ function createLineGraph(containerId, raceData){
} }
function handleMouseOverLinePoint(d, i) { function handleMouseOverLinePoint(d, i) {
var elemType = 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 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(elemType === elemTypes.linepoint){ if(elemType === elemTypes.linepoint){
var circleId = "circle-linepoint-" + d.lap + "-" + d.driverId;
var circle = d3.select("#" + circleId);
circle circle
.style("opacity", 1); .style("opacity", 1);
textArr = getLapTextArray(raceData,d); textArr = getLapTextArray(raceData,d);
}else if(elemType === elemTypes.pitstoppoint){ }else if(elemType === elemTypes.pitstoppoint){
circle d3.select(this)
.attr("r", linePointSize * 2); .attr("r", linePointSize * 2);
textArr = getPitStopTextArray(raceData,d); textArr = getPitStopTextArray(raceData,d);
}else if(elemType === elemTypes.endpoint){ }else if(elemType === elemTypes.endpoint){
d3.select(this) d3.select(this)
.attr("height", rectSize * 1.3) .attr("height", rectSize * 1.5)
.attr("width", rectSize * 1.3); .attr("width", rectSize * 1.5);
textArr = getEndPointTextArray(raceData,d); textArr = getEndPointTextArray(raceData,d);
} }
@ -284,21 +282,19 @@ function createLineGraph(containerId, raceData){
} }
function handleMouseOutLinePoint(d, i) { function handleMouseOutLinePoint(d, i) {
var dataType = d3.select(this).attr("data-elemtype"); var dataType = 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 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(dataType === elemTypes.linepoint){ if(dataType === elemTypes.linepoint){
var circleId = "circle-linepoint-" + d.lap + "-" + d.driverId;
var circle = d3.select("#" + circleId);
circle circle
.attr("r", linePointSize) .attr("r", linePointSize)
.style("opacity", 0); .style("opacity", 0);
textArr = getLapTextArray(raceData,d); textArr = getLapTextArray(raceData,d);
}else if(dataType === elemTypes.pitstoppoint){ }else if(dataType === elemTypes.pitstoppoint){
circle d3.select(this)
.attr("r", linePointSize); .attr("r", linePointSize);
textArr = getPitStopTextArray(raceData,d); textArr = getPitStopTextArray(raceData,d);
}else if(dataType === elemTypes.endpoint){ }else if(dataType === elemTypes.endpoint){