fix(slider): index scale by scaleKey

__tests__/plots/interaction/countries-annotation-slider-filter.ts

@@ -59,6 +59,19 @@ export function countriesAnnotationSliderFilter(): G2Spec {
           ],
         },
       },
+      {
+        type: 'text',
+        style: {
+          text: 'Population',
+          x: '100%',
+          y: '100%',
+          dx: -10,
+          dy: -10,
+          textAlign: 'end',
+          fontSize: 50,
+          textBaseline: 'bottom',
+        },
+      },
     ],
   };
 }

src/runtime/plot.ts

@@ -38,6 +38,7 @@ import { documentOf, useLibrary } from './library';
 import { initializeMark } from './mark';
 import {
   applyScale,
+  assignScale,
   collectScales,
   inferScale,
   syncFacetsScales,
@@ -535,6 +536,7 @@ async function initializeMarks(
       (total, { scale }) => deepMix(total, scale),
       {},
     );
+    const { scaleKey } = channels[0];
 
     // Use the fields of the first channel as the title.
     const { values: FV } = channels[0];
@@ -550,14 +552,10 @@ async function initializeMarks(
     // Use the name of the first channel as the scale name.
     const { name } = channels[0];
     const values = channels.flatMap(({ values }) => values.map((d) => d.value));
-    const scale = inferScale(
-      name,
-      values,
-      options,
-      coordinates,
-      theme,
-      library,
-    );
+    const scale = {
+      ...inferScale(name, values, options, coordinates, theme, library),
+      key: scaleKey,
+    };
     channels.forEach((channel) => (channel.scale = scale));
   }
 
@@ -622,7 +620,7 @@ function initializeState(
       const { name } = descriptor;
       const scale = useRelationScale(descriptor, library);
       scales.push(scale);
-      scaleInstance[name] = scale;
+      assignScale(scaleInstance, { [name]: scale });
     }
     component.scaleInstances = scales;
   }
@@ -651,7 +649,7 @@ function initializeState(
     const markScaleInstance = mapObject(scale, (options) => {
       return useRelationScale(options, library);
     });
-    Object.assign(scaleInstance, markScaleInstance);
+    assignScale(scaleInstance, markScaleInstance);
     const value = applyScale(channels, markScaleInstance);
 
     // Calc points and transformation for each data,

src/runtime/scale.ts

@@ -1,5 +1,5 @@
 import { Linear, createInterpolateValue } from '@antv/scale';
-import { extent } from 'd3-array';
+import { extent, max } from 'd3-array';
 import * as d3ScaleChromatic from 'd3-scale-chromatic';
 import { deepMix, omit, upperFirst } from '@antv/util';
 import { firstOf, lastOf, unique } from '../utils/array';
@@ -161,6 +161,32 @@ export function useRelation(
   return [conditionalize, deconditionalize];
 }
 
+export function assignScale(
+  target: Record<string, Scale>,
+  source: Record<string, Scale>,
+): Record<string, Scale> {
+  const keys = Object.keys(target);
+  for (const scale of Object.values(source)) {
+    const { name, key } = scale.getOptions();
+    if (typeof key === 'string') {
+      if (!(key in target)) target[key] = scale;
+    } else {
+      // For scale.key = Symbol('independent')
+      if (!(name in target)) target[name] = scale;
+      else {
+        const I = keys
+          .filter((d) => d.startsWith(name))
+          .map((d) => +(/[^\d]+(\d*)$/.exec(d)?.[1] || 0));
+        const index = max(I) + 1;
+        const newKey = `${name}${index}`;
+        target[newKey] = scale;
+        scale.getOptions().key = newKey;
+      }
+    }
+  }
+  return target;
+}
+
 export function useRelationScale(
   options: Record<string, any>,
   library: G2Library,