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

Make sure the lines don't overlap any other things.

This commit is contained in:
Maschell 2017-12-31 01:34:51 +01:00
parent 20de45ae4f
commit 6292afec03
2 changed files with 9 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/main.css
View File

@ -90,11 +90,6 @@ body {
padding-left: 1.25rem; padding-left: 1.25rem;
} }
.area {
fill: steelblue;
clip-path: url(#clip);
}
.zoom { .zoom {
cursor: move; cursor: move;
fill: none; fill: none;

18
js/diagrams.js
View File

@ -82,12 +82,6 @@ function createLineGraph(containerId, raceData){
.attr("height", svgHeight); .attr("height", svgHeight);
//---------------------------------------------------------------------- //----------------------------------------------------------------------
/*svg.append("rect")
.attr("class", "zoom")
.attr("width", graphPosWidth.width)
.attr("height", graphPosWidth.height)
.attr("transform", "translate(" + graphPosWidth.posX + "," + graphPosWidth.posY + ")")
.call(zoom);*/
svg.append("defs").append("clipPath") svg.append("defs").append("clipPath")
.attr("id", "clip") .attr("id", "clip")
@ -95,10 +89,11 @@ function createLineGraph(containerId, raceData){
.attr("width", graphPosWidth.width) .attr("width", graphPosWidth.width)
.attr("height", graphPosWidth.height); .attr("height", graphPosWidth.height);
var focus = svg.append("g") var focus = svg.append("g")
.attr("class", "focus") .attr("class", "focus")
.attr("transform", "translate(" + graphPosWidth.posX + "," + graphPosWidth.posY + ")"); .attr("transform", "translate(" + graphPosWidth.posX + "," + graphPosWidth.posY + ")");
var context = svg.append("g") var context = svg.append("g")
.attr("class", "context") .attr("class", "context")
.attr("height", smallGraphPosWidth.height) .attr("height", smallGraphPosWidth.height)
@ -134,7 +129,8 @@ function createLineGraph(containerId, raceData){
focus.append("path") focus.append("path")
.data([driverLapData.laps]) .data([driverLapData.laps])
.attr("class", "line pathLines") .attr("class", "line pathLines")
.attr("data-line", driverLapData.driver.driverId) // custom data to specify the line .attr("clip-path","url(#clip)")
.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)
.attr("data-elemtype", elemTypes.line) .attr("data-elemtype", elemTypes.line)
@ -159,6 +155,7 @@ function createLineGraph(containerId, raceData){
.data([singleLap]) .data([singleLap])
.enter().append("circle") // Uses the enter().append() method .enter().append("circle") // Uses the enter().append() method
.attr("class", "pitstopdot") // Assign a class for styling .attr("class", "pitstopdot") // Assign a class for styling
.attr("clip-path","url(#clip)")
.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)
@ -194,6 +191,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", "linedot") // Assign a class for styling .attr("class", "linedot") // Assign a class for styling
.attr("clip-path","url(#clip)")
.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)
@ -210,6 +208,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", "linedot") // Assign a class for styling .attr("class", "linedot") // Assign a class for styling
.attr("clip-path","url(#clip)")
.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)
@ -236,6 +235,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", "endpointdot") // Assign a class for styling .attr("class", "endpointdot") // Assign a class for styling
.attr("clip-path","url(#clip)")
.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)
@ -253,7 +253,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("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)