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

package/fesm2022/mathstack-viz.mjs

@@ -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,7 @@ 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();
-        }
+        // Note: marksDisplay removal is now handled immediately in hideElementsPerConfig()
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     setTickFontSize(tickTextSelection) {
@@ -1903,14 +1917,10 @@ 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());
-        }
+        // Note: baseline removal is now handled immediately in hideElementsPerConfig()
     }
     processTickLabels() {
-        if (this.config.ticks.labelsDisplay === false) {
-            this.axisGroup.call((g) => g.selectAll('.tick text').remove());
-        }
+        // Note: labelsDisplay removal is now handled immediately in hideElementsPerConfig()
         if (this.config.ticks.rotate) {
             this.axisGroup.call((g) => g
                 .selectAll('.tick text')
@@ -1943,8 +1953,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()))