fix zero for descending domains (#556)

Author: mbostock

src/scales.js

@@ -188,7 +188,7 @@ export function scaleOrder({range, domain = range}) {
   return Math.sign(order(domain)) * Math.sign(order(range));
 }
 
-function order(values) {
+export function order(values) {
   if (values == null) return;
   const first = values[0];
   const last = values[values.length - 1];

src/scales/quantitative.js

@@ -1,5 +1,6 @@
 import {
   ascending,
+  extent,
   interpolateHcl,
   interpolateHsl,
   interpolateLab,
@@ -24,6 +25,7 @@ import {ordinalRange, quantitativeScheme} from "./schemes.js";
 import {registry, radius, opacity, color} from "./index.js";
 import {positive, negative} from "../defined.js";
 import {constant} from "../mark.js";
+import {order} from "../scales.js";
 
 export const flip = i => t => i(1 - t);
 
@@ -88,13 +90,17 @@ export function ScaleQ(key, scale, channels, {
     interpolate = scale.interpolate();
   }
 
-  // TODO describe zero option
+  // If a zero option is specified, we assume that the domain is numeric, and we
+  // want to ensure that the domain crosses zero. However, note that the domain
+  // may be reversed (descending) so we shouldn’t assume that the first value is
+  // smaller than the last; and also it’s possible that the domain has more than
+  // two values for a “poly” scale. And lastly be careful not to mutate input!
   if (zero) {
-    domain = [...domain]; // copy before write
-    if (domain[0] > 0) {
-      domain[0] = 0;
-    } else if (domain[domain.length - 1] < 0) {
-      domain[domain.length - 1] = 0;
+    const [min, max] = extent(domain);
+    if ((min > 0) || (max < 0)) {
+      domain = Array.from(domain);
+      if (order(domain) < 0) domain[domain.length - 1] = 0;
+      else domain[0] = 0;
     }
   }
 

test/scales/scales-test.js

@@ -247,6 +247,45 @@ it("plot(…).scale(name) promotes the given zero option to the domain", async (
   });
 });
 
+it("plot(…).scale(name) handles the zero option correctly for descending domains", async () => {
+  const penguins = await d3.csv("data/penguins.csv", d3.autoType);
+  const plot = Plot.dotX(penguins, {x: "body_mass_g"}).plot({x: {zero: true, domain: [4000, 2000]}});
+  assert.deepStrictEqual(plot.scale("x"), {
+    type: "linear",
+    domain: [4000, 0],
+    range: [20, 620],
+    interpolate: d3.interpolate,
+    clamp: false,
+    label: "← body_mass_g"
+  });
+});
+
+it("plot(…).scale(name) handles the zero option correctly for polylinear domains", async () => {
+  const penguins = await d3.csv("data/penguins.csv", d3.autoType);
+  const plot = Plot.dotX(penguins, {x: "body_mass_g"}).plot({x: {type: "linear", zero: true, domain: [1000, 2000, 4000]}});
+  assert.deepStrictEqual(plot.scale("x"), {
+    type: "linear",
+    domain: [0, 2000, 4000],
+    range: [20, 320, 620],
+    interpolate: d3.interpolate,
+    clamp: false,
+    label: "body_mass_g →"
+  });
+});
+
+it("plot(…).scale(name) handles the zero option correctly for descending polylinear domains", async () => {
+  const penguins = await d3.csv("data/penguins.csv", d3.autoType);
+  const plot = Plot.dotX(penguins, {x: "body_mass_g"}).plot({x: {type: "linear", zero: true, domain: [4000, 2000, 1000]}});
+  assert.deepStrictEqual(plot.scale("x"), {
+    type: "linear",
+    domain: [4000, 2000, 0],
+    range: [20, 320, 620],
+    interpolate: d3.interpolate,
+    clamp: false,
+    label: "← body_mass_g"
+  });
+});
+
 it("plot(…).scale('color') can return undefined if no color scale is present", () => {
   const plot = Plot.dot([1, 2], {x: d => d}).plot();
   assert.strictEqual(plot.scale("color"), undefined);