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

Dynamically calculate tooltip width

This commit is contained in:
Jan Philipp Timme 2017-12-31 14:54:52 +01:00
parent 8e6938a907
commit 50492892e8
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
js/diagrams.js
View File

@ -363,6 +363,7 @@ function createLineGraph(containerId, raceData){
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
var textArr = []; var textArr = [];
var textMaxLength = 1;
// Add interactivity // Add interactivity
// Use D3 to select element, change color and size // Use D3 to select element, change color and size
if(elemType === elemTypes.linepoint){ if(elemType === elemTypes.linepoint){
@ -385,12 +386,19 @@ function createLineGraph(containerId, raceData){
textArr = getEndPointTextArray(raceData,d); textArr = getEndPointTextArray(raceData,d);
} }
// Calculate tooltip width based on text
for(var lineI in textArr) {
var line = textArr[lineI];
if(line.length > textMaxLength) textMaxLength = line.length;
}
textMaxLength = (2/3) * textMaxLength;
var tooltipGroup = svg.append("g") var tooltipGroup = svg.append("g")
.attr("id", "t" + d.lap + "-" + d.position + "-" + i); // Unique id so it can be removed later .attr("id", "t" + d.lap + "-" + d.position + "-" + i); // Unique id so it can be removed later
tooltipGroup.append("rect") tooltipGroup.append("rect")
.attr("style", "fill:rgb(225,225,225);stroke:black;stroke-width:2;") .attr("style", "fill:rgb(225,225,225);stroke:black;stroke-width:2;")
.attr("width", "150") .attr("width", textMaxLength + "em")
.attr("height", (textArr.length + 1) + "em") .attr("height", (textArr.length + 1) + "em")
.attr("x", function() { return d3.mouse(this)[0] + 10; }) .attr("x", function() { return d3.mouse(this)[0] + 10; })
.attr("y", function() { return d3.mouse(this)[1] + 10; }); .attr("y", function() { return d3.mouse(this)[1] + 10; });