fix facet channel sort with transform

Author: mbostock

src/channel.js

@@ -69,14 +69,14 @@ export function inferChannelScale(name, channel) {
 // Note: mutates channel.domain! This is set to a function so that it is lazily
 // computed; i.e., if the scale’s domain is set explicitly, that takes priority
 // over the sort option, and we don’t need to do additional work.
-export function channelDomain(channels, facetChannels, data, options) {
+export function channelDomain(data, facets, channels, facetChannels, options) {
   const {reverse: defaultReverse, reduce: defaultReduce = true, limit: defaultLimit} = options;
   for (const x in options) {
     if (!registry.has(x)) continue; // ignore unknown scale keys (including generic options)
     let {value: y, reverse = defaultReverse, reduce = defaultReduce, limit = defaultLimit} = maybeValue(options[x]);
     if (reverse === undefined) reverse = y === "width" || y === "height"; // default to descending for lengths
     if (reduce == null || reduce === false) continue; // disabled reducer
-    const X = findScaleChannel(channels, x) || (facetChannels && findScaleChannel(facetChannels, x));
+    const X = x === "fx" || x === "fy" ? reindexFacetChannel(facets, facetChannels[x]) : findScaleChannel(channels, x);
     if (!X) throw new Error(`missing channel for scale: ${x}`);
     const XV = X.value;
     const [lo = 0, hi = Infinity] = isIterable(limit) ? limit : limit < 0 ? [limit] : [0, limit];
@@ -118,6 +118,21 @@ function findScaleChannel(channels, scale) {
   }
 }
 
+// Facet channels are not affected by transforms; so, to compute the domain of a
+// facet scale, we must first re-index the facet channel according to the
+// transformed mark index. Note: mutates channel, but that should be safe here?
+function reindexFacetChannel(facets, channel) {
+  const originalFacets = facets.original;
+  if (originalFacets === facets) return channel; // not transformed
+  const V1 = channel.value;
+  const V2 = (channel.value = []); // mutates channel!
+  for (let i = 0; i < originalFacets.length; ++i) {
+    const vi = V1[originalFacets[i][0]];
+    for (const j of facets[i]) V2[j] = vi;
+  }
+  return channel;
+}
+
 function difference(channels, k1, k2) {
   const X1 = values(channels, k1);
   const X2 = values(channels, k2);

src/mark.js

@@ -78,9 +78,11 @@ export class Mark {
   initialize(facets, facetChannels) {
     let data = arrayify(this.data);
     if (facets === undefined && data != null) facets = [range(data)];
+    const originalFacets = facets;
     if (this.transform != null) ({facets, data} = this.transform(data, facets)), (data = arrayify(data));
+    if (facets !== undefined) facets.original = originalFacets; // needed up read facetChannels
     const channels = Channels(this.channels, data);
-    if (this.sort != null) channelDomain(channels, facetChannels, data, this.sort); // mutates facetChannels!
+    if (this.sort != null) channelDomain(data, facets, channels, facetChannels, this.sort); // mutates facetChannels!
     return {data, facets, channels};
   }
   filter(index, channels, values) {

test/output/athletesSort.svg

@@ -0,0 +1,8 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export async function athletesSort() {
+  const athletes = await d3.csv("data/athletes.csv", d3.autoType);
+  const female = (d) => d.sex === "female";
+  return Plot.barX(athletes, Plot.groupZ({x: "mean"}, {x: female, fy: "sport", sort: {fy: "x"}})).plot();
+}

test/plots/athletes-sort.js

@@ -281,6 +281,7 @@ export * from "./aapl-close.js";
 export * from "./aapl-fancy-axis.js";
 export * from "./aspectRatio.js";
 export * from "./athletes-sample.js";
+export * from "./athletes-sort.js";
 export * from "./autoplot.js";
 export * from "./axis-labels.js";
 export * from "./bigint.js";