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

Fixed Highlight Bug with Linepoints

This commit is contained in:
sirsandmann 2017-12-17 23:45:51 +01:00
parent 3ec19571ed
commit e7a6131bfb
1 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
js/diagrams.js
View File

@ -47,7 +47,7 @@ function createLineGraph(containerId, raceData){
.data([driverLapData.laps]) .data([driverLapData.laps])
.attr("class", "line") .attr("class", "line")
.attr("data-line", driverLapData.driver.driverId)// custom data to Specify the line .attr("data-line", driverLapData.driver.driverId)// custom data to Specify the line
.attr("data-highlightable", 1) .attr("data-opacitychange", 1)
.attr("data-highlighted", 0) .attr("data-highlighted", 0)
.attr("stroke", getColorValue(driverIndex, enhancedLapData.length) ) .attr("stroke", getColorValue(driverIndex, enhancedLapData.length) )
.attr("d", lineDataDefinition); .attr("d", lineDataDefinition);
@ -58,7 +58,7 @@ function createLineGraph(containerId, raceData){
.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("data-line", driverLapData.driver.driverId) .attr("data-line", driverLapData.driver.driverId)
.attr("data-highlightable", 0) .attr("data-opacitychange", 0)
.attr("data-highlighted", 0) .attr("data-highlighted", 0)
.attr("fill", getColorValue(driverIndex, enhancedLapData.length)) .attr("fill", getColorValue(driverIndex, enhancedLapData.length))
.attr("cx", function(d, i) {return x(d.lap) }) .attr("cx", function(d, i) {return x(d.lap) })
@ -77,7 +77,7 @@ function createLineGraph(containerId, raceData){
.enter().append("circle") // Uses the enter().append() method .enter().append("circle") // Uses the enter().append() method
.attr("class", "dot pitstopdot") // Assign a class for styling .attr("class", "dot pitstopdot") // Assign a class for styling
.attr("data-line", driverLapData.driver.driverId) .attr("data-line", driverLapData.driver.driverId)
.attr("data-highlightable", 1) .attr("data-opacitychange", 1)
.attr("data-highlighted", 0) .attr("data-highlighted", 0)
.attr("fill", getColorValue(driverIndex, enhancedLapData.length)) .attr("fill", getColorValue(driverIndex, enhancedLapData.length))
.attr("cx", function(d, i) {return x(d.lap) }) .attr("cx", function(d, i) {return x(d.lap) })
@ -104,32 +104,34 @@ function createLineGraph(containerId, raceData){
.attr("transform", "translate( " + (width) + ", 0 )"); .attr("transform", "translate( " + (width) + ", 0 )");
function handleClickOnPoint(d,i){ function handleClickOnPoint(d,i){
console.log(this);
//select elements that are highlightable but are not highlighted //select elements that are highlightable but are not highlighted
d3.selectAll("[data-highlightable='" + 1 +"'][data-highlighted='" + 0 +"']") d3.selectAll("[data-opacitychange='" + 1 +"'][data-highlighted='" + 0 +"']")
.style("opacity", 0.3); .style("opacity", 0.3);
// if clicked on already highlighted line, remove highlight // if clicked on already highlighted line, remove highlight
if(this.getAttribute("data-highlighted") == 1){ if(this.getAttribute("data-highlighted") == 1){
d3.selectAll("[data-line='" + d.driverId +"'][data-highlightable='" + 1 +"']") d3.selectAll("[data-line='" + d.driverId +"'][data-opacitychange='" + 1 +"']")
.attr("data-highlighted", 0)
.style("opacity", 0.3); .style("opacity", 0.3);
d3.selectAll("[data-line='" + d.driverId +"']")
.attr("data-highlighted", 0);
}else{ }else{
//select elements that belong to line and are highlightable //select elements that belong to line and are highlightable
d3.selectAll("[data-line='" + d.driverId +"'][data-highlightable='" + 1 +"']") d3.selectAll("[data-line='" + d.driverId +"'][data-opacitychange='" + 1 +"']")
.attr("data-highlighted", 1)
.style("opacity", 1); .style("opacity", 1);
d3.selectAll("[data-line='" + d.driverId +"']")
.attr("data-highlighted", 1);
} }
// if no element highlighted, then everything normal again // if no element highlighted, then everything normal again
var highlightedElements = d3.selectAll("[data-highlightable='" + 1 +"'][data-highlighted='" + 1 +"']"); var highlightedElements = d3.selectAll("[data-opacitychange='" + 1 +"'][data-highlighted='" + 1 +"']");
console.log(highlightedElements);
if(highlightedElements.size() == 0){ if(highlightedElements.size() == 0){
//select elements that are highlightable but are not highlighted //select elements that are highlightable but are not highlighted
d3.selectAll("[data-highlightable='" + 1 +"'][data-highlighted='" + 0 +"']") d3.selectAll("[data-opacitychange='" + 1 +"'][data-highlighted='" + 0 +"']")
.style("opacity", 1); .style("opacity", 1);
} }
} }
function handleMouseOverLinePoint(d, i) { function handleMouseOverLinePoint(d, i) {