From cf0d34054f521c35443195a3908e3c5294245e09 Mon Sep 17 00:00:00 2001 From: Mohamed Nasser Date: Thu, 23 Nov 2023 21:03:18 +0200 Subject: [PATCH] 2d selection in density map --- .../components/VisualTools/Chart/DensityChart.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/source/components/VisualTools/Chart/DensityChart.js b/source/components/VisualTools/Chart/DensityChart.js index 0b7f13e..d603bbb 100644 --- a/source/components/VisualTools/Chart/DensityChart.js +++ b/source/components/VisualTools/Chart/DensityChart.js @@ -80,9 +80,9 @@ function DensityChart(props) { svg.current.append('g').call(d3.axisLeft(scales.current.y)); const getCurrentMouseClickPosition = () => { - const mouseX = d3.event.sourceEvent.clientX - svg.current.node().getBoundingClientRect().x - - 2 * margin.left; - const mouseY = d3.event.sourceEvent.clientY - svg.current.node().getBoundingClientRect().y; + const rec = svg.current.select('.overlay').node(); + const mouseX = d3.event.sourceEvent.clientX - rec.getBoundingClientRect().x; + const mouseY = d3.event.sourceEvent.clientY - rec.getBoundingClientRect().y; return [mouseX, mouseY]; }; @@ -103,7 +103,7 @@ function DensityChart(props) { const selectArea = svg.current.append('rect') .attr('class', 'selected-area') .attr('position', 'absolute') - .attr('x', startX + margin.left) + .attr('x', startX) .attr('y', startY) .attr('width', Math.abs(endPosition[0] - startPosition[0])) .attr('height', Math.abs(endPosition[1] - startPosition[1])) @@ -118,12 +118,18 @@ function DensityChart(props) { const selectedArea = svg.current.append('rect') .attr('class', 'selected-area') .attr('position', 'absolute') - .attr('x', startX + margin.left) + .attr('x', startX) .attr('y', startY) .attr('width', Math.abs(endPosition[0] - startPosition[0])) .attr('height', Math.abs(endPosition[1] - startPosition[1])) .attr('fill', 'rgba(140, 140, 140, 0.5)'); end(); + setTimeout( + () => { + selectedArea.remove(); + }, + 20, + ); }); svg.current.append('g').call(brush);