From 0be6d6ceec03dabf83ec5ada5d6f409eb8974478 Mon Sep 17 00:00:00 2001 From: MonikaFu Date: Fri, 18 Oct 2024 15:58:50 +0200 Subject: [PATCH 1/2] Add hover over values to techmix labels --- src/js/techmix_sector.js | 30 +++++++++++++++++++++++++++--- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/src/js/techmix_sector.js b/src/js/techmix_sector.js index 4f0e25f..88b0390 100644 --- a/src/js/techmix_sector.js +++ b/src/js/techmix_sector.js @@ -268,13 +268,17 @@ export class techmix_sector { .call(d3.axisBottom(x).ticks(5).tickFormat(d3.format('.0%'))); // Add the y axis and tick labels - svg + let yaxisCurrent = svg .append('g') .attr('transform', `translate(${marginLeft},${y0(subdataTechPerYear[0].year)})`) .attr('class', 'axis') .call(d3.axisLeft(yCurrent).tickSizeOuter(0)) .call((g) => g.selectAll('.domain').remove()) - .call((g) => g.selectAll('.tick line').remove()); + .call((g) => g.selectAll('.tick line').remove()) + .selectAll('text') + .on('mouseover', mouseOverLabels) + .on('mouseout', mouseout) + .on('mousemove', mousemove); svg .append('g') @@ -282,7 +286,11 @@ export class techmix_sector { .attr('class', 'axis') .call(d3.axisLeft(yFuture).tickSizeOuter(0)) .call((g) => g.selectAll('.domain').remove()) - .call((g) => g.selectAll('.tick line').remove()); + .call((g) => g.selectAll('.tick line').remove()) + .selectAll('text') + .on('mouseover', mouseOverLabels) + .on('mouseout', mouseout) + .on('mousemove', mousemove); // Add year labels on the right svg @@ -370,6 +378,22 @@ export class techmix_sector { .style('display', 'inline-block'); } + function mouseOverLabels() { + if (this.innerHTML == 'Scenario') { + tooltip + .html( + scenario + ) + .style('display', 'inline-block'); + } else if (this.innerHTML == 'Benchmark') { + tooltip + .html( + benchmark + ) + .style('display', 'inline-block'); + } + } + function mousemove(d) { tooltip.style('left', d3.event.pageX + 10 + 'px').style('top', d3.event.pageY - 20 + 'px'); } From c9731fefced406fa26cbac9ec2eca3c29ac9cbee Mon Sep 17 00:00:00 2001 From: MonikaFu Date: Fri, 18 Oct 2024 16:34:58 +0200 Subject: [PATCH 2/2] Style --- src/js/techmix_sector.js | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/src/js/techmix_sector.js b/src/js/techmix_sector.js index 88b0390..616f68e 100644 --- a/src/js/techmix_sector.js +++ b/src/js/techmix_sector.js @@ -125,7 +125,7 @@ export class techmix_sector { }); // subgroups contains all possible technologies for sector let subgroups0 = new Set(d3.map(subdataTechPerYear[0].stackedData, (d) => d.key).keys()); - let subgroups1 = new Set(d3.map(subdataTechPerYear[1].stackedData, (d) => d.key).keys()) + let subgroups1 = new Set(d3.map(subdataTechPerYear[1].stackedData, (d) => d.key).keys()); let subgroups = Array.from(subgroups0.union(subgroups1)); @@ -380,17 +380,9 @@ export class techmix_sector { function mouseOverLabels() { if (this.innerHTML == 'Scenario') { - tooltip - .html( - scenario - ) - .style('display', 'inline-block'); + tooltip.html(scenario).style('display', 'inline-block'); } else if (this.innerHTML == 'Benchmark') { - tooltip - .html( - benchmark - ) - .style('display', 'inline-block'); + tooltip.html(benchmark).style('display', 'inline-block'); } }