From db72436ba61080e7dba24541a47f4debdf9f83e0 Mon Sep 17 00:00:00 2001 From: Jan Philipp Timme Date: Sat, 30 Dec 2017 13:14:40 +0100 Subject: [PATCH] Keep endpoints centered on mouseover --- js/diagrams.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/js/diagrams.js b/js/diagrams.js index 4ef49f1..ef726f3 100644 --- a/js/diagrams.js +++ b/js/diagrams.js @@ -152,8 +152,8 @@ function createLineGraph(containerId, raceData){ .attr("data-highlighted", 0) .attr("data-elemtype", elemTypes.endpoint) .attr("fill", getColorValue(driverIndex, enhancedLapData.length)) - .attr("x", function(d, i) {return x(d.lap) - rectSize * 1/2 }) - .attr("y", function(d, i) { return y(d.position) - rectSize * 1/2 }) + .attr("x", function(d, i) { return x(d.lap) - rectSize * 1/2; }) + .attr("y", function(d, i) { return y(d.position) - rectSize * 1/2; }) .attr("height", rectSize) .attr("width", rectSize) .on("click", handleClickOnPoint) @@ -251,9 +251,12 @@ function createLineGraph(containerId, raceData){ .attr("r", linePointSize * 2); textArr = getPitStopTextArray(raceData,d); }else if(elemType === elemTypes.endpoint){ + var newRectSize = rectSize * 1.5; d3.select(this) - .attr("height", rectSize * 1.5) - .attr("width", rectSize * 1.5); + .attr("height", newRectSize) + .attr("width", newRectSize) + .attr("x", function(d, i) { return x(d.lap) - newRectSize * 1/2; }) + .attr("y", function(d, i) { return y(d.position) - newRectSize * 1/2; }); textArr = getEndPointTextArray(raceData,d); } @@ -300,7 +303,9 @@ function createLineGraph(containerId, raceData){ }else if(dataType === elemTypes.endpoint){ d3.select(this) .attr("height", rectSize) - .attr("width", rectSize); + .attr("width", rectSize) + .attr("x", function(d, i) {return x(d.lap) - rectSize * 1/2 }) + .attr("y", function(d, i) { return y(d.position) - rectSize * 1/2 }); textArr = getEndPointTextArray(raceData,d); }