Axes and grids now support the filter option

src/marks/axis.js

@@ -8,7 +8,7 @@ import {maybeColorChannel, maybeNumberChannel, maybeRangeInterval} from "../opti
 import {isTemporalScale} from "../scales.js";
 import {offset} from "../style.js";
 import {formatTimeTicks, isTimeYear, isUtcYear} from "../time.js";
-import {initializer} from "../transforms/basic.js";
+import {initializer, composeInitializer} from "../transforms/basic.js";
 import {ruleX, ruleY} from "./rule.js";
 import {text, textX, textY} from "./text.js";
 import {vectorX, vectorY} from "./vector.js";
@@ -505,56 +505,59 @@ function labelOptions(
   };
 }
 
-function axisMark(mark, k, ariaLabel, data, options, initialize) {
+function axisMark(mark, k, ariaLabel, data, {filter, sort, reverse, ...options}, initialize) {
   let channels;
-  const m = mark(
-    data,
-    initializer(options, function (data, facets, _channels, scales, dimensions, context) {
-      const initializeFacets = data == null && (k === "fx" || k === "fy");
-      const {[k]: scale} = scales;
-      if (!scale) throw new Error(`missing scale: ${k}`);
-      let {ticks, tickSpacing, interval} = options;
-      if (isTemporalScale(scale) && typeof ticks === "string") (interval = ticks), (ticks = undefined);
-      if (data == null) {
-        if (isIterable(ticks)) {
-          data = arrayify(ticks);
-        } else if (scale.ticks) {
-          if (ticks !== undefined) {
-            data = scale.ticks(ticks);
+
+  let i = initializer(options, function (data, facets, _channels, scales, dimensions, context) {
+    const initializeFacets = data == null && (k === "fx" || k === "fy");
+    const {[k]: scale} = scales;
+    if (!scale) throw new Error(`missing scale: ${k}`);
+    let {ticks, tickSpacing, interval} = options;
+    if (isTemporalScale(scale) && typeof ticks === "string") (interval = ticks), (ticks = undefined);
+    if (data == null) {
+      if (isIterable(ticks)) {
+        data = arrayify(ticks);
+      } else if (scale.ticks) {
+        if (ticks !== undefined) {
+          data = scale.ticks(ticks);
+        } else {
+          interval = maybeRangeInterval(interval === undefined ? scale.interval : interval, scale.type);
+          if (interval !== undefined) {
+            // For time scales, we could pass the interval directly to
+            // scale.ticks because it’s supported by d3.utcTicks; but
+            // quantitative scales and d3.ticks do not support numeric
+            // intervals for scale.ticks, so we compute them here.
+            const [min, max] = extent(scale.domain());
+            data = interval.range(min, interval.offset(interval.floor(max))); // inclusive max
           } else {
-            interval = maybeRangeInterval(interval === undefined ? scale.interval : interval, scale.type);
-            if (interval !== undefined) {
-              // For time scales, we could pass the interval directly to
-              // scale.ticks because it’s supported by d3.utcTicks; but
-              // quantitative scales and d3.ticks do not support numeric
-              // intervals for scale.ticks, so we compute them here.
-              const [min, max] = extent(scale.domain());
-              data = interval.range(min, interval.offset(interval.floor(max))); // inclusive max
-            } else {
-              const [min, max] = extent(scale.range());
-              ticks = (max - min) / (tickSpacing === undefined ? (k === "x" ? 80 : 35) : tickSpacing);
-              data = scale.ticks(ticks);
-            }
+            const [min, max] = extent(scale.range());
+            ticks = (max - min) / (tickSpacing === undefined ? (k === "x" ? 80 : 35) : tickSpacing);
+            data = scale.ticks(ticks);
           }
-        } else {
-          data = scale.domain();
-        }
-        if (k === "y" || k === "x") {
-          facets = [range(data)];
-        } else {
-          channels[k] = {scale: k, value: identity};
         }
+      } else {
+        data = scale.domain();
       }
-      initialize?.call(this, scale, data, ticks, channels);
-      const initializedChannels = Object.fromEntries(
-        Object.entries(channels).map(([name, channel]) => {
-          return [name, {...channel, value: valueof(data, channel.value)}];
-        })
-      );
-      if (initializeFacets) facets = context.filterFacets(data, initializedChannels);
-      return {data, facets, channels: initializedChannels};
-    })
-  );
+      if (k === "y" || k === "x") {
+        facets = [range(data)];
+      } else {
+        channels[k] = {scale: k, value: identity};
+      }
+    }
+    initialize?.call(this, scale, data, ticks, channels);
+    const initializedChannels = Object.fromEntries(
+      Object.entries(channels).map(([name, channel]) => {
+        return [name, {...channel, value: valueof(data, channel.value)}];
+      })
+    );
+    if (initializeFacets) facets = context.filterFacets(data, initializedChannels);
+    return {data, facets, channels: initializedChannels};
+  });
+
+  // Apply the sort and filter options after the initializer has determined the mark’s data.
+  i.initializer = composeInitializer(i.initializer, initializer({filter, sort, reverse}).initializer);
+
+  const m = mark(data, i);
   if (data == null) {
     channels = m.channels;
     m.channels = {};

src/transforms/basic.js

@@ -44,7 +44,7 @@ function composeTransform(t1, t2) {
   };
 }
 
-function composeInitializer(i1, i2) {
+export function composeInitializer(i1, i2) {
   if (i1 == null) return i2 === null ? undefined : i2;
   if (i2 == null) return i1 === null ? undefined : i1;
   return function (data, facets, channels, ...args) {