fix: Transform axis extents.

uwdata · Oct 19, 2024 · 91c1c0f · 91c1c0f
1 parent 2876a92
commit 91c1c0f
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 16 deletions.
diff --git a/src/handlers/select.js b/src/handlers/select.js
@@ -11,7 +11,7 @@ function setSelection(marks, opacity) {
     selectAll(marks).attr('opacity', opacity);
 }
 
-function selectAllMarks(marks) {
+export function selectAllMarks(marks) {
     setSelection(marks, marks[0][OpacityField] || SelectOpacity);
 }
 

diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,3 @@
 export { hydrate } from './hydrate.js';
-export { selectMarks } from './handlers/select.js';
+export { selectMarks, selectAllMarks } from './handlers/select.js';
 export { annotate } from './handlers/annotate.js';
diff --git a/src/parsers/helpers/axis-parser.js b/src/parsers/helpers/axis-parser.js
@@ -1,6 +1,6 @@
 import { max, min } from 'd3-array';
 import { CenterX, CenterY, OrphanTickRole, RoleProperty, Tick, horizAlign } from '../../state/constants.js';
-import { sortByViewPos } from '../../util/util.js';
+import { computeCenterPos, sortByViewPos } from '../../util/util.js';
 import { getFormatVal } from './data-parser.js';
 import { pairGroups } from '../engine/parser-groups.js';
 import { scaleBand, scaleLinear, scaleTime } from 'd3-scale';
@@ -101,16 +101,35 @@ function computeScale(state, axis, isX) {
     if (axis.domain[0] instanceof Date) axis.axis = axis.axis.tickFormat(state.xAxis.formatter.format);
 
     // Reconfigure axis to prevent tick / gridline change.
-    // const tickLeft = computeCenterPos(
-    //     state.xAxis.ticks.filter(d => d.value === state.xAxis.domain[0])[0].marks[0], Left
-    // );
-    // const tickRight = computeCenterPos(
-    //     state.xAxis.ticks.filter(d => d.value === state.xAxis.domain[1])[0].marks[0], Left
-    // );
-    // const newDomain = axis.range.map(
-    //     axis.scale.copy().range(ticks).invert, axis.scale
-    // );
-    // axis.scale.domain(newDomain);
+    if (isX && !axis.ordinal.length) {
+        const tickLeft = computeCenterPos(
+            axis.ticks.filter(d => d.value === axis.domain[0])[0].marks[0], 'left'
+        );
+        const tickRight = computeCenterPos(
+            axis.ticks.filter(d => d.value === axis.domain[1])[0].marks[0], 'left'
+        );
+
+        const ticks = [tickLeft, tickRight].map(d => d - state.svg.getBBoxCustom().left);
+        const newDomainX = axis.range.map(
+            axis.scale.copy().range(ticks).invert, axis.scale
+        );
+
+        axis.scale.domain(newDomainX);
+    } else if (!isX && !axis.ordinal.length) {
+        const tickTop = computeCenterPos(
+            axis.ticks.filter(d => d.value === axis.domain[0])[0].marks[0], 'top'
+        );
+        const tickBottom = computeCenterPos(
+            axis.ticks.filter(d => d.value === axis.domain[1])[0].marks[0], 'top'
+        );
+
+        const ticks = [tickTop, tickBottom].map(d => d - state.svg.getBBoxCustom().top);
+        const newDomainY = axis.range.map(
+            axis.scale.copy().range(ticks).invert, axis.scale
+        );
+
+        axis.scale.domain(newDomainY);
+    }
 }
 
 export function inferAxes(state, textGroups, markGroups) {

diff --git a/src/parsers/helpers/data-parser.js b/src/parsers/helpers/data-parser.js
@@ -105,9 +105,9 @@ export function inferMarkAttributes(state) {
         const iterable = { };
         // console.log(markX, markY)
         // console.log(state.xAxis.scale.invert(markX), state.yAxis.scale.invert(markY))
-        iterable[state.xAxis.title ? state.xAxis.title.innerHTML.toLowerCase() : 'x'] = state.xAxis.ordinal.length ? invertBand(state.xAxis.scale, markRect.centerX - svgRect.left) : state.xAxis.scale.invert(markX);
+        iterable[state.xAxis.title ? state.xAxis.title.innerHTML.toLowerCase() : 'x'] = state.xAxis.ordinal.length ? invertBand(state.xAxis.scale, markRect.centerX) : state.xAxis.scale.invert(markX);
         iterable[state.yAxis.title ? state.yAxis.title.innerHTML.toLowerCase() : 'y'] = state.yAxis.ordinal.length
-            ? invertBand(state.yAxis.scale, markRect.centerY - svgRect.top)
+            ? invertBand(state.yAxis.scale, markRect.centerY)
             : mark.type === 'rect'
                 ? String(Math.round(state.yAxis.scale.invert(markY)))
                 : state.yAxis.scale.invert(markY);

diff --git a/src/util/util.js b/src/util/util.js
@@ -16,7 +16,7 @@ export function copyElement(element) {
 }
 
 export function computeCenterPos(element, orient) {
-    const clientRect = element._getBBox();
+    const clientRect = element.getBBoxCustom();
     const offset = orient === 'right' || orient === 'left' ? clientRect.width / 2 : clientRect.height / 2;
     return clientRect[orient] + (orient === 'left' || orient === 'top' ? offset : -offset);
 }