handle missing scales (#939)

Co-authored-by: Philippe Rivière <[email protected]>

Co-authored-by: Philippe Rivière <[email protected]>

Author: mbostock

src/marks/bar.js

@@ -47,12 +47,12 @@ export class AbstractBar extends Mark {
   }
   _width({x}, {x: X}, {marginRight, marginLeft, width}) {
     const {insetLeft, insetRight} = this;
-    const bandwidth = X ? x.bandwidth() : width - marginRight - marginLeft;
+    const bandwidth = X && x ? x.bandwidth() : width - marginRight - marginLeft;
     return Math.max(0, bandwidth - insetLeft - insetRight);
   }
   _height({y}, {y: Y}, {marginTop, marginBottom, height}) {
     const {insetTop, insetBottom} = this;
-    const bandwidth = Y ? y.bandwidth() : height - marginTop - marginBottom;
+    const bandwidth = Y && y ? y.bandwidth() : height - marginTop - marginBottom;
     return Math.max(0, bandwidth - insetTop - insetBottom);
   }
 }

src/marks/tick.js

@@ -61,13 +61,13 @@ export class TickX extends AbstractTick {
   _x2(scales, {x: X}) {
     return i => X[i];
   }
-  _y1(scales, {y: Y}, {marginTop}) {
+  _y1({y}, {y: Y}, {marginTop}) {
     const {insetTop} = this;
-    return Y ? i => Y[i] + insetTop : marginTop + insetTop;
+    return Y && y ? i => Y[i] + insetTop : marginTop + insetTop;
   }
   _y2({y}, {y: Y}, {height, marginBottom}) {
     const {insetBottom} = this;
-    return Y ? i => Y[i] + y.bandwidth() - insetBottom : height - marginBottom - insetBottom;
+    return Y && y ? i => Y[i] + y.bandwidth() - insetBottom : height - marginBottom - insetBottom;
   }
 }
 
@@ -94,13 +94,13 @@ export class TickY extends AbstractTick {
   _transform(selection, {y}, dx, dy) {
     selection.call(applyTransform, null, y, dx, offset + dy);
   }
-  _x1(scales, {x: X}, {marginLeft}) {
+  _x1({x}, {x: X}, {marginLeft}) {
     const {insetLeft} = this;
-    return X ? i => X[i] + insetLeft : marginLeft + insetLeft;
+    return X && x ? i => X[i] + insetLeft : marginLeft + insetLeft;
   }
   _x2({x}, {x: X}, {width, marginRight}) {
     const {insetRight} = this;
-    return X ? i => X[i] + x.bandwidth() - insetRight : width - marginRight - insetRight;
+    return X && x ? i => X[i] + x.bandwidth() - insetRight : width - marginRight - insetRight;
   }
   _y1(scales, {y: Y}) {
     return i => Y[i];

src/plot.js

@@ -6,7 +6,7 @@ import {Dimensions} from "./dimensions.js";
 import {Legends, exposeLegends} from "./legends.js";
 import {arrayify, isDomainSort, isScaleOptions, keyword, map, range, second, where, yes} from "./options.js";
 import {Scales, ScaleFunctions, autoScaleRange, exposeScales} from "./scales.js";
-import {registry as scaleRegistry} from "./scales/index.js";
+import {position, registry as scaleRegistry} from "./scales/index.js";
 import {applyInlineStyles, maybeClassName, maybeClip, styles} from "./style.js";
 import {basic, initializer} from "./transforms/basic.js";
 import {maybeInterval} from "./transforms/interval.js";
@@ -113,6 +113,7 @@ export function plot(options = {}) {
 
   // Reconstruct scales if new scaled channels were created during reinitialization.
   if (newByScale.size) {
+    for (const key of newByScale) if (scaleRegistry.get(key) === position) throw new Error(`initializers cannot declare position scales: ${key}`);
     const newScaleDescriptors = Scales(addScaleChannels(new Map(), stateByMark, key => newByScale.has(key)), options);
     const newScales = ScaleFunctions(newScaleDescriptors);
     Object.assign(scaleDescriptors, newScaleDescriptors);
@@ -346,8 +347,7 @@ function inferChannelScale(channels) {
       switch (name) {
         case "fill": case "stroke": scale = "color"; break;
         case "fillOpacity": case "strokeOpacity": case "opacity": scale = "opacity"; break;
-        case "r": case "length": case "symbol": scale = name; break;
-        default: scale = null;
+        default: scale = scaleRegistry.has(name) ? name : null; break;
       }
       channel.scale = scale;
     }

src/scales.js

@@ -328,6 +328,7 @@ export function scaleOrder({range, domain = range}) {
 // example, a rect will span the full extent of the chart along a collapsed
 // dimension (whereas a dot will simply be drawn in the center).
 export function isCollapsed(scale) {
+  if (scale === undefined) return true; // treat missing scale as collapsed
   const domain = scale.domain();
   const value = scale(domain[0]);
   for (let i = 1, n = domain.length; i < n; ++i) {

test/output/dodgeRule.svg

@@ -0,0 +1,5 @@
+import * as Plot from "@observablehq/plot";
+
+export default async function() {
+  return Plot.ruleX([1, 2, 3], Plot.dodgeY()).plot();
+}

test/output/dodgeTick.svg

@@ -0,0 +1,5 @@
+import * as Plot from "@observablehq/plot";
+
+export default async function() {
+  return Plot.tickX([1, 2, 3], Plot.dodgeY()).plot();
+}

test/plots/dodge-rule.js

@@ -50,7 +50,9 @@ export {default as diamondsCaratPrice} from "./diamonds-carat-price.js";
 export {default as diamondsCaratPriceDots} from "./diamonds-carat-price-dots.js";
 export {default as diamondsCaratSampling} from "./diamonds-carat-sampling.js";
 export {default as documentationLinks} from "./documentation-links.js";
+export {default as dodgeRule} from "./dodge-rule.js";
 export {default as dodgeTextRadius} from "./dodge-text-radius.js";
+export {default as dodgeTick} from "./dodge-tick.js";
 export {default as dotSort} from "./dot-sort.js";
 export {default as downloads} from "./downloads.js";
 export {default as downloadsOrdinal} from "./downloads-ordinal.js";