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

The axis data does now change

This commit is contained in:
Maschell 2017-12-31 13:07:41 +01:00
parent 44e8ccacfb
commit e6e3484a58
1 changed files with 33 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
js/diagrams.js
View File

@ -284,14 +284,15 @@ function createLineGraph(containerId, raceData){
}); });
// Add the X Axis // Add the X Axis
focus.append("g") var testXAxis = 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 + ")")
.attr("clip-path","url(#clip)") .attr("clip-path","url(#clip)")
.call(xAxis); .call(xAxis);
// Add the Y Axis on both sides // Add the Y Axis on left side
focus.append("g") focus.append("g")
.attr("class","axis--y-left")
.call( .call(
d3.axisLeft(y) d3.axisLeft(y)
.ticks(raceData.drivers.length) .ticks(raceData.drivers.length)
@ -300,15 +301,9 @@ function createLineGraph(containerId, raceData){
}) })
); );
// Add gridlines on x axis to better figure out laps
focus.append("g")
.attr("class", "xAxisGridlines")
.attr("transform", "translate(0," + graphPosWidth.height + ")")
.style("opacity", 0.06)
.call(xAxisGridlines);
//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")
.attr("class","axis--y-right")
.call( .call(
d3.axisRight(y) d3.axisRight(y)
.ticks(raceData.drivers.length) .ticks(raceData.drivers.length)
@ -323,13 +318,14 @@ function createLineGraph(containerId, raceData){
}) })
) )
.attr("transform", "translate( " + (graphPosWidth.width) + ", 0 )"); .attr("transform", "translate( " + (graphPosWidth.width) + ", 0 )");
// Add gridlines on x axis to better figure out laps
focus.append("g")
.attr("class", "xAxisGridlines")
.attr("transform", "translate(0," + graphPosWidth.height + ")")
.style("opacity", 0.06)
.call(xAxisGridlines);
//----------------------------
//---------------------------------------------------------------------------
function handleClickOnPoint(d,i){ function handleClickOnPoint(d,i){
//select elements that are highlightable but are not highlighted //select elements that are highlightable but are not highlighted
@ -524,6 +520,28 @@ function createLineGraph(containerId, raceData){
focus.selectAll(".linedot").attr("cx", function(d, i) {return x(d.lap) }); focus.selectAll(".linedot").attr("cx", function(d, i) {return x(d.lap) });
// Update xAxis // Update xAxis
focus.select(".axis--x").call(xAxis); focus.select(".axis--x").call(xAxis);
var xAxisValues = d3.extent(x.domain());
if(xAxisValues[1] > 1){
var startLap = Math.floor(xAxisValues[0]);
var endLap = Math.floor(xAxisValues[1]);
focus.select(".axis--y-left").call(d3.axisLeft(y).ticks(raceData.drivers.length).tickFormat(function(d) {
return getDriverCodeFromPosAndLap(raceData, startLap, d) + " " + d;
}));
focus.select(".axis--y-right").call(
d3.axisRight(y)
.ticks(raceData.drivers.length)
.tickFormat(function(d) {
var driverCode = "";
if(getDriverCodeFromPosAndLap(raceData, endLap, d)){
driverCode = getDriverCodeFromPosAndLap(raceData, endLap, d);
}else{
driverCode = getDriverCodeFromPosAndLap(raceData, endLap - 1, d); // only if the driver has finished..
}
return d + " " + driverCode ;
}));
}
// Update gridlines // Update gridlines
focus.select(".xAxisGridlines").call(xAxisGridlines); focus.select(".xAxisGridlines").call(xAxisGridlines);
} }