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

Restructure xAxis related things a bit

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

30
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);
@ -258,9 +263,9 @@ function createLineGraph(containerId, raceData){
// Add the X Axis // Add the X Axis
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,24 +282,9 @@ 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 //Add driver information on the right side of the graph.
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.
focus.append("g") focus.append("g")
.call( .call(
d3.axisRight(y) d3.axisRight(y)