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

Merge branch 'master' of https://github.com/F1Vis/f1vis

Browse Source
This commit is contained in:
Maschell 2017-12-30 20:49:53 +01:00
commit c0fd35ca66
1 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
js/diagrams.js
View File

@ -117,7 +117,7 @@ function createLineGraph(containerId, raceData){
//console.log(driverLapData); //console.log(driverLapData);
focus.append("path") focus.append("path")
.data([driverLapData.laps]) .data([driverLapData.laps])
.attr("class", "line") .attr("class", "line zoomable")
.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-opacitychange", 1) .attr("data-opacitychange", 1)
.attr("data-highlighted", 0) .attr("data-highlighted", 0)
@ -127,7 +127,7 @@ function createLineGraph(containerId, raceData){
context.append("path") context.append("path")
.data([driverLapData.laps]) .data([driverLapData.laps])
.attr("class", "line-context") .attr("class", "line-context zoomable")
.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-opacitychange", 1) .attr("data-opacitychange", 1)
.attr("data-highlighted", 0) .attr("data-highlighted", 0)
@ -142,7 +142,7 @@ function createLineGraph(containerId, raceData){
focus.selectAll(".pitstoppoint") focus.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 pitstopdot") // Assign a class for styling .attr("class", "dot pitstopdot zoomable") // Assign a class for styling
.attr("data-line", driverLapData.driver.driverId) .attr("data-line", driverLapData.driver.driverId)
.attr("data-opacitychange", 1) .attr("data-opacitychange", 1)
.attr("data-highlighted", 0) .attr("data-highlighted", 0)
@ -159,7 +159,7 @@ function createLineGraph(containerId, raceData){
context.selectAll(".pitstoppoint-context") context.selectAll(".pitstoppoint-context")
.data([singleLap]) .data([singleLap])
.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 zoomable") // Assign a class for styling
.attr("data-line", driverLapData.driver.driverId) .attr("data-line", driverLapData.driver.driverId)
.attr("data-opacitychange", 1) .attr("data-opacitychange", 1)
.attr("data-highlighted", 0) .attr("data-highlighted", 0)
@ -178,7 +178,7 @@ function createLineGraph(containerId, raceData){
focus.selectAll(".linepoint") focus.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 linedot") // Assign a class for styling .attr("class", "dot linedot zoomable") // Assign a class for styling
.attr("id", function(d, i) { return "circle-linepoint-" + d.lap + "-" + d.driverId; }) .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)
@ -194,7 +194,7 @@ function createLineGraph(containerId, raceData){
focus.selectAll(".invisiblelinepoint") focus.selectAll(".invisiblelinepoint")
.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 zoomable") // Assign a class for styling
.attr("circle-id", function(d, i) { return "circle-linepoint-" + d.lap + "-" + d.driverId; }) .attr("circle-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)
@ -222,6 +222,7 @@ function createLineGraph(containerId, raceData){
.data([driverLapData.laps[driverLapData.laps.length - 1]]) .data([driverLapData.laps[driverLapData.laps.length - 1]])
.enter().append("rect") // Uses the enter().append() method .enter().append("rect") // Uses the enter().append() method
//.attr("class", "endpoint") // Assign a class for styling //.attr("class", "endpoint") // Assign a class for styling
.attr("class", "zoomable")
.attr("data-line", driverLapData.driver.driverId) .attr("data-line", driverLapData.driver.driverId)
.attr("data-opacitychange", 1) .attr("data-opacitychange", 1)
.attr("data-highlighted", 0) .attr("data-highlighted", 0)
@ -240,6 +241,7 @@ function createLineGraph(containerId, raceData){
.data([driverLapData.laps[driverLapData.laps.length - 1]]) .data([driverLapData.laps[driverLapData.laps.length - 1]])
.enter().append("rect") // Uses the enter().append() method .enter().append("rect") // Uses the enter().append() method
//.attr("class", "endpoint") // Assign a class for styling //.attr("class", "endpoint") // Assign a class for styling
.attr("class", "zoomable")
.attr("data-line", driverLapData.driver.driverId) .attr("data-line", driverLapData.driver.driverId)
.attr("data-opacitychange", 1) .attr("data-opacitychange", 1)
.attr("data-highlighted", 0) .attr("data-highlighted", 0)
@ -513,8 +515,8 @@ function createLineGraph(containerId, raceData){
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
var s = d3.event.selection || x2.range(); var s = d3.event.selection || x2.range();
x.domain(s.map(x2.invert, x2)); x.domain(s.map(x2.invert, x2));
focus.select(".area").attr("d", area); focus.selectAll(".zoomable").attr("d", area);
focus.select(".axis--x").call(xAxis); focus.selectAll(".axis--x").call(xAxis);
svg.select(".zoom").call(zoom.transform, d3.zoomIdentity svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
.scale(graphPosWidth.width / (s[1] - s[0])) .scale(graphPosWidth.width / (s[1] - s[0]))
.translate(-s[0], 0)); .translate(-s[0], 0));
@ -524,8 +526,8 @@ function createLineGraph(containerId, raceData){
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
var t = d3.event.transform; var t = d3.event.transform;
x.domain(t.rescaleX(x2).domain()); x.domain(t.rescaleX(x2).domain());
focus.select(".area").attr("d", area); focus.selectAll(".zoomable").attr("d", area);
focus.select(".axis--x").call(xAxis); focus.selectAll(".axis--x").call(xAxis);
context.select(".brush").call(brush.move, x.range().map(t.invertX, t)); context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
} }