@mathstack/viz 0.0.1-beta.7 → 0.0.1-beta.9

package/fesm2022/mathstack-viz.mjs

@@ -1815,9 +1815,9 @@ class XyAxis extends XyAuxMarks {
                 .append('g')
                 .attr('class', this.class.axisGroup);
         }
-        // Avoid odd animations of ticks or domain lines when those things move between draws
+        // Remove domain to avoid odd baseline/zero-axis positioning during transitions
+        // Ticks are preserved to allow smooth transitions
         this.axisGroup.select('.domain').remove();
-        this.axisGroup.selectAll('.tick').remove();
         this.axisGroup
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             .transition(this.getTransition(this.axisGroup))
@@ -1827,11 +1827,28 @@ class XyAxis extends XyAuxMarks {
             this.processDomain();
             this.drawGrid();
         });
+        // Hide elements immediately based on config to prevent flash during transition
+        this.hideElementsPerConfig();
         this.processTickLabels();
         if (this.config.label) {
             this.createLabel();
         }
     }
+    hideElementsPerConfig() {
+        // Remove tick marks immediately if configured to be hidden
+        if (this.config.ticks.marksDisplay === false) {
+            this.axisGroup.selectAll('.tick line').interrupt().remove();
+        }
+        // Remove tick labels immediately if configured to be hidden
+        if (this.config.ticks.labelsDisplay === false) {
+            this.axisGroup.selectAll('.tick text').interrupt().remove();
+        }
+        // Remove baseline immediately if not displayed and no zero baseline exists
+        const zeroAxisTranslate = this.getBaselineTranslate();
+        if (!this.config.baseline.display && zeroAxisTranslate === null) {
+            this.axisGroup.select('.domain').interrupt().remove();
+        }
+    }
     processTicks() {
         const tickText = select(this.elRef.nativeElement).selectAll('.tick text');
         if (this.config.ticks.class) {
@@ -1856,10 +1873,6 @@ class XyAxis extends XyAuxMarks {
         if (this.config.ticks.wrap && this.config.ticks.wrap.width !== undefined) {
             this.wrapAxisTickText(tickText);
         }
-        if (this.config.ticks.marksDisplay === false) {
-            const marks = select(this.elRef.nativeElement).selectAll(`.${this.class.axisGroup} .tick line`);
-            marks.remove();
-        }
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     setTickFontSize(tickTextSelection) {
@@ -1903,14 +1916,8 @@ class XyAxis extends XyAuxMarks {
                 .attr('transform', null)
                 .attr('stroke-dasharray', null));
         }
-        if (!this.config.baseline.display && zeroAxisTranslate === null) {
-            this.axisGroup.call((g) => g.select('.domain').remove());
-        }
     }
     processTickLabels() {
-        if (this.config.ticks.labelsDisplay === false) {
-            this.axisGroup.call((g) => g.selectAll('.tick text').remove());
-        }
         if (this.config.ticks.rotate) {
             this.axisGroup.call((g) => g
                 .selectAll('.tick text')
@@ -1943,8 +1950,6 @@ class XyAxis extends XyAuxMarks {
                     .append('g')
                     .attr('class', this.class.gridGroup);
             }
-            // Avoid odd animations of grid lines when they change between draws
-            this.gridGroup.selectAll('.tick').remove();
             this.gridGroup
                 .transition(this.getTransition(this.gridGroup))
                 .call(this.axis.tickSizeInner(this.getGridLineLength()))