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

Restructure xAxis related things a bit

Browse Source
This commit is contained in:
Jan Philipp Timme 2017-12-30 23:57:15 +01:00
parent f90b73ce73
commit 3a851b8fa1
1 changed files with 10 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
js/diagrams.js
View File

@ -48,6 +48,11 @@ function createLineGraph(containerId, raceData){
var xAxis = d3.axisBottom(x), var xAxis = d3.axisBottom(x),
yAxis = d3.axisLeft(y); yAxis = d3.axisLeft(y);
var xAxisGridlines = d3.axisBottom(x)
.ticks(raceData.lapTimes.size) // One gridline for each lap
.tickSize(-graphPosWidth.height)
.tickFormat("");
var brush = d3.brushX() var brush = d3.brushX()
.extent([[0, 0], [smallGraphPosWidth.width, smallGraphPosWidth.height]]) .extent([[0, 0], [smallGraphPosWidth.width, smallGraphPosWidth.height]])
.on("brush end", brushed); .on("brush end", brushed);
@ -260,7 +265,7 @@ function createLineGraph(containerId, raceData){
focus.append("g") focus.append("g")
.attr("class", "axis axis--x") .attr("class", "axis axis--x")
.attr("transform", "translate(0," + graphPosWidth.height + ")") .attr("transform", "translate(0," + graphPosWidth.height + ")")
.call(d3.axisBottom(x)); .call(xAxis);
// Add the Y Axis on both sides // Add the Y Axis on both sides
focus.append("g") focus.append("g")
@ -277,22 +282,7 @@ function createLineGraph(containerId, raceData){
.attr("class", "grid axis axis--x") .attr("class", "grid axis axis--x")
.attr("transform", "translate(0," + graphPosWidth.height + ")") .attr("transform", "translate(0," + graphPosWidth.height + ")")
.style("opacity", 0.06) .style("opacity", 0.06)
.call(d3.axisBottom(x) .call(xAxisGridlines);
.ticks(raceData.lapTimes.size) // One gridline for each lap
.tickSize(-graphPosWidth.height)
.tickFormat("")
);
// Add clickable ticklines so people can scale things
focus.append("g")
.attr("class", "grid axis axis--x")
.attr("transform", "translate(0," + graphPosWidth.height + ")")
.style("opacity", 0.5)
.call(d3.axisBottom(x)
.ticks(raceData.lapTimes.size) // One gridline for each lap
.tickSize(8)
.tickFormat("")
);
//Add driver information on the right side of the graph. //Add driver information on the right side of the graph.
focus.append("g") focus.append("g")