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

Highlighting added.

Browse Source
This commit is contained in:
sirsandmann 2017-12-17 23:00:33 +01:00
parent 20d3bdd1fb
commit 6713b50716
1 changed files with 45 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
js/diagrams.js
View File

@ -2,12 +2,12 @@
// https://bl.ocks.org/mbostock/3884955 // https://bl.ocks.org/mbostock/3884955
function createLineGraph(containerId, raceData){ function createLineGraph(containerId, raceData){
var linePointSize = 4;
console.log(raceData); console.log(raceData);
var height = 1000; var height = 1000;
var width = 1000; var width = 1000;
var linePointSize = 5;
var amountClickedLines = 0;
// set the dimensions and margins of the graph // set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50}, var margin = {top: 20, right: 20, bottom: 30, left: 50},
@ -42,10 +42,13 @@ function createLineGraph(containerId, raceData){
// Adds all lines // Adds all lines
enhancedLapData.forEach((driverLapData, driverIndex) => { enhancedLapData.forEach((driverLapData, driverIndex) => {
console.log(driverLapData); //console.log(driverLapData);
svg.append("path") svg.append("path")
.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-highlightable", 1)
.attr("data-highlighted", 0)
.attr("stroke", getColorValue(driverIndex, enhancedLapData.length) ) .attr("stroke", getColorValue(driverIndex, enhancedLapData.length) )
.attr("d", lineDataDefinition); .attr("d", lineDataDefinition);
@ -53,11 +56,15 @@ function createLineGraph(containerId, raceData){
svg.selectAll(".linepoint") svg.selectAll(".linepoint")
.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") // Assign a class for styling .attr("class", "dot linedot") // Assign a class for styling
.attr("data-line", driverLapData.driver.driverId)
.attr("data-highlightable", 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) })
.attr("cy", function(d, i) { return y(d.position) }) .attr("cy", function(d, i) { return y(d.position) })
.attr("r", linePointSize) .attr("r", linePointSize)
.on("click", handleClickOnPoint)
.on("mouseover", handleMouseOverLinePoint) .on("mouseover", handleMouseOverLinePoint)
.on("mouseout", handleMouseOutLinePoint) .on("mouseout", handleMouseOutLinePoint)
.style("opacity", 0); .style("opacity", 0);
@ -68,11 +75,15 @@ function createLineGraph(containerId, raceData){
svg.selectAll(".pitstoppoint") svg.selectAll(".pitstoppoint")
.data([singleLap]) .data([singleLap])
.enter().append("circle") // Uses the enter().append() method .enter().append("circle") // Uses the enter().append() method
.attr("class", "dot") // Assign a class for styling .attr("class", "dot pitstopdot") // Assign a class for styling
.attr("data-line", driverLapData.driver.driverId)
.attr("data-highlightable", 1)
.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) })
.attr("cy", function(d, i) { return y(d.position) }) .attr("cy", function(d, i) { return y(d.position) })
.attr("r", linePointSize * 1.2) .attr("r", linePointSize * 1.2)
.on("click", handleClickOnPoint)
.on("mouseover", handleMouseOverLinePoint) .on("mouseover", handleMouseOverLinePoint)
.on("mouseout", handleMouseOutLinePoint); .on("mouseout", handleMouseOutLinePoint);
} }
@ -92,6 +103,35 @@ function createLineGraph(containerId, raceData){
.call(d3.axisRight(y)) .call(d3.axisRight(y))
.attr("transform", "translate( " + (width) + ", 0 )"); .attr("transform", "translate( " + (width) + ", 0 )");
function handleClickOnPoint(d,i){
console.log(this);
//select elements that are highlightable but are not highlighted
d3.selectAll("[data-highlightable='" + 1 +"'][data-highlighted='" + 0 +"']")
.style("opacity", 0.3);
// if clicked on already highlighted line, remove highlight
if(this.getAttribute("data-highlighted") == 1){
d3.selectAll("[data-line='" + d.driverId +"'][data-highlightable='" + 1 +"']")
.attr("data-highlighted", 0)
.style("opacity", 0.3);
}else{
//select elements that belong to line and are highlightable
d3.selectAll("[data-line='" + d.driverId +"'][data-highlightable='" + 1 +"']")
.attr("data-highlighted", 1)
.style("opacity", 1);
}
// if no element highlighted, then everything normal again
var highlightedElements = d3.selectAll("[data-highlightable='" + 1 +"'][data-highlighted='" + 1 +"']");
console.log(highlightedElements);
if(highlightedElements.size() == 0){
//select elements that are highlightable but are not highlighted
d3.selectAll("[data-highlightable='" + 1 +"'][data-highlighted='" + 0 +"']")
.style("opacity", 1);
}
}
function handleMouseOverLinePoint(d, i) { function handleMouseOverLinePoint(d, i) {
// Add interactivity // Add interactivity
// Use D3 to select element, change color and size // Use D3 to select element, change color and size