Merge pull request #101 from MohamedNasser8/master

Fix Offset in Brush Events for Scatter and Density Plots
sharmalab · Nov 10, 2023 · 7b0b904 · 7b0b904
2 parents 61909bd + 7d3447b
commit 7b0b904
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/source/components/VisualTools/Chart/DensityChart.js b/source/components/VisualTools/Chart/DensityChart.js
@@ -54,13 +54,19 @@ function DensityChart(props) {
         .attr('height', rect.height)
         .append('g')
         .attr('transform', `translate(${margin.left},${margin.top})`);
-
+      const paddingPercent = 0.1; // Adjust the percentage of padding as needed
+      const domainExtentX = d3.extent(props.data, (d) => d[props.fields.x]);
+      const domainPaddingX = (domainExtentX[1] - domainExtentX[0]) * paddingPercent;
+      const domainExtentY = d3.extent(props.data, (d) => d[props.fields.y]);
+      const domainPaddingY = (domainExtentY[1] - domainExtentY[0]) * paddingPercent;
       scales.current.x
-        .domain(d3.extent(props.data, (d) => d[props.fields.x]))
+        .domain([domainExtentX[0] - domainPaddingX,
+          domainExtentX[1] + domainPaddingX])
         .range([0, innerWidth]);
 
       scales.current.y
-        .domain(d3.extent(props.data, (d) => d[props.fields.y]))
+        .domain([domainExtentY[0] - domainPaddingY,
+          domainExtentY[1] + domainPaddingY])
         .range([innerHeight, 0]);
 
       svg.current
@@ -104,7 +110,6 @@ function DensityChart(props) {
       svg.current
         .insert('g', 'g')
         .attr('id', 'draw_area')
-        .attr('transform', `translate(${margin.left},${-margin.bottom})`)
         .selectAll('path')
         .data(densityData)
         .enter()

diff --git a/source/components/VisualTools/Chart/ScatterChart.js b/source/components/VisualTools/Chart/ScatterChart.js
@@ -38,7 +38,7 @@ export default class ScatterChart extends PureComponent {
         .select(this.self.current)
         .append('canvas')
         .attr('width', innerWidth)
-        .attr('height', innerHeight + 5)
+        .attr('height', innerHeight)
         .style('transform', `translate(${this.state.margin.left}px,${this.state.margin.top}px)`);
 
       // create svg
@@ -52,7 +52,7 @@ export default class ScatterChart extends PureComponent {
       // create viewer
       const viewer = svg
         .append('g')
-        .attr('transform', `translate(${this.state.margin.left},${this.state.margin.top})`);
+        .attr('transform', `translate(${this.state.margin.left},0)`);
       //
       this.xScale = this.createScaleLiner(this.props.fields.x, [0, innerWidth]);
       this.yScale = this.createScaleLiner(this.props.fields.y, [innerHeight, 0]);
@@ -123,9 +123,13 @@ export default class ScatterChart extends PureComponent {
   }
 
   createScaleLiner(f, range) {
+    const paddingPercent = 0.1; // Adjust the percentage of padding as needed
+    const domainExtent = d3.extent(this.state.data, (d) => d[f]);
+    const domainPadding = (domainExtent[1] - domainExtent[0]) * paddingPercent;
     const scaleLiner = d3
       .scaleLinear()
-      .domain(d3.extent(this.state.data, (d) => d[f]))
+      .domain([domainExtent[0] - domainPadding,
+        domainExtent[1] + domainPadding])
       .range(range)
       .nice();
     return scaleLiner;