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

Add doubleclick event to prepare for adding animating expanding the chart

This commit is contained in:
Jan Philipp Timme 2017-12-30 13:56:03 +01:00
parent a0d405c710
commit bf990a02c0
1 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
js/diagrams.js
View File

@ -67,7 +67,7 @@ function createLineGraph(containerId, raceData){
svg.append("path") svg.append("path")
.data([driverLapData.laps]) .data([driverLapData.laps])
.attr("class", "line") .attr("class", "line")
.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)
.attr("data-elemtype", elemTypes.line) .attr("data-elemtype", elemTypes.line)
@ -91,6 +91,7 @@ function createLineGraph(containerId, raceData){
.attr("cy", function(d, i) { return y(d.position) }) .attr("cy", function(d, i) { return y(d.position) })
.attr("r", linePointSize * 1.2) .attr("r", linePointSize * 1.2)
.on("click", handleClickOnPoint) .on("click", handleClickOnPoint)
.on("dblclick", handleDoubleClickOnPoint)
.on("mouseover", handleMouseOverLinePoint) .on("mouseover", handleMouseOverLinePoint)
.on("mouseout", handleMouseOutLinePoint); .on("mouseout", handleMouseOutLinePoint);
// Remove data from driverLapData, since we don't need a generic datapoint for this // Remove data from driverLapData, since we don't need a generic datapoint for this
@ -129,6 +130,7 @@ function createLineGraph(containerId, raceData){
.attr("cy", function(d, i) { return y(d.position) }) .attr("cy", function(d, i) { return y(d.position) })
.attr("r", linePointSize*2.4) .attr("r", linePointSize*2.4)
.on("click", handleClickOnPoint) .on("click", handleClickOnPoint)
.on("dblclick", handleDoubleClickOnPoint)
.on("mouseover", handleMouseOverLinePoint) .on("mouseover", handleMouseOverLinePoint)
.on("mouseout", handleMouseOutLinePoint) .on("mouseout", handleMouseOutLinePoint)
.style("opacity", 0); .style("opacity", 0);
@ -157,6 +159,7 @@ function createLineGraph(containerId, raceData){
.attr("height", rectSize) .attr("height", rectSize)
.attr("width", rectSize) .attr("width", rectSize)
.on("click", handleClickOnPoint) .on("click", handleClickOnPoint)
.on("dblclick", handleDoubleClickOnPoint)
.on("mouseover", handleMouseOverLinePoint) .on("mouseover", handleMouseOverLinePoint)
.on("mouseout", handleMouseOutLinePoint); .on("mouseout", handleMouseOutLinePoint);
@ -199,6 +202,17 @@ function createLineGraph(containerId, raceData){
.tickFormat("") .tickFormat("")
); );
// Add clickable ticklines so people can scale things
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.style("opacity", 0.5)
.call(d3.axisBottom(x)
.ticks(raceData.lapTimes.size) // One gridline for each lap
.tickSize(8)
.tickFormat("")
);
svg.append("g") svg.append("g")
.call( .call(
d3.axisRight(y) d3.axisRight(y)
@ -245,6 +259,11 @@ function createLineGraph(containerId, raceData){
} }
} }
function handleDoubleClickOnPoint(d,i){
var lapNr = d.lap;
console.log(["doubleClick", d.lap]);
}
function handleMouseOverLinePoint(d, i) { function handleMouseOverLinePoint(d, i) {
var elemType = d3.select(this).attr("data-elemtype"); var elemType = d3.select(this).attr("data-elemtype");
//depending on Pitstop and lap different Texts //depending on Pitstop and lap different Texts