avoid illegible ticks when the size of the domain exceeds x times the…

… desired number of ticks
observablehq · Mar 23, 2022 · e13196d · e13196d
1 parent e466abe
commit e13196d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/axis.js b/src/axis.js
@@ -64,8 +64,10 @@ export class AxisX {
       labelOffset,
       line,
       name,
+      ticks,
       tickRotate
     } = this;
+    if (!x.interpolate && x.domain().length > 8 * ticks) return; // avoid a huge ordinal domain
     const offset = name === "x" ? 0 : axis === "top" ? marginTop - facetMarginTop : marginBottom - facetMarginBottom;
     const offsetSign = axis === "top" ? -1 : 1;
     const ty = offsetSign * offset + (axis === "top" ? marginTop : height - marginBottom);
@@ -155,8 +157,10 @@ export class AxisY {
       labelOffset,
       line,
       name,
+      ticks,
       tickRotate
     } = this;
+    if (!y.interpolate && y.domain().length > 8 * ticks) return; // avoid a huge ordinal domain
     const offset = name === "y" ? 0 : axis === "left" ? marginLeft - facetMarginLeft : marginRight - facetMarginRight;
     const offsetSign = axis === "left" ? -1 : 1;
     const tx = offsetSign * offset + (axis === "right" ? width - marginRight : marginLeft);

diff --git a/src/plot.js b/src/plot.js
@@ -129,8 +129,14 @@ export function plot(options = {}) {
   const {fx, fy} = scales;
   const axisY = axes[facets !== undefined && fy ? "fy" : "y"];
   const axisX = axes[facets !== undefined && fx ? "fx" : "x"];
-  if (axisY) svg.appendChild(axisY.render(null, scales, dimensions));
-  if (axisX) svg.appendChild(axisX.render(null, scales, dimensions));
+  if (axisY) {
+    const node = axisY.render(null, scales, dimensions);
+    if (node) svg.appendChild(node);
+  }
+  if (axisX) {
+    const node = axisX.render(null, scales, dimensions);
+    if (node) svg.appendChild(node);
+  }
 
   // Render (possibly faceted) marks.
   if (facets !== undefined) {