fix(legend-filter): funnel (#4960)

__tests__/plots/interaction/alphabet-interval-funnel-legend-filter.ts

@@ -0,0 +1,34 @@
+import { G2Spec } from '../../../src';
+import { LEGEND_ITEMS_CLASS_NAME } from '../../../src/interaction/legendFilter';
+import { step } from './utils';
+
+export function alphabetIntervalFunnelLegendFilter(): G2Spec {
+  return {
+    type: 'interval',
+    coordinate: {
+      transform: [{ type: 'transpose' }],
+    },
+    data: [
+      { text: '页面', value: 1000 },
+      { text: '页面1', value: 900 },
+      { text: '页面2', value: 800 },
+      { text: '页面3', value: 700 },
+    ],
+    encode: {
+      x: 'text',
+      y: 'value',
+      color: 'text',
+      shape: 'funnel',
+    },
+    transform: [{ type: 'symmetryY' }],
+    scale: { x: { padding: 0 } },
+    interaction: { legendFilter: true },
+  };
+}
+
+alphabetIntervalFunnelLegendFilter.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const elements = document.getElementsByClassName(LEGEND_ITEMS_CLASS_NAME);
+  const [, e1] = elements;
+  return [step(e1, 'click'), step(e1, 'click')];
+};

__tests__/plots/interaction/index.ts

@@ -57,3 +57,4 @@ export { pointsPointRegressionQuadInset } from './points-point-regression-quad-i
 export { populationIntervalDiverging } from './population-interval-diverging';
 export { stateAgesIntervalNormalized } from './stateages-interval-normalized';
 export { aaplLineSliderFilterTranspose } from './appl-line-slider-filter-transpose';
+export { alphabetIntervalFunnelLegendFilter } from './alphabet-interval-funnel-legend-filter';

src/runtime/plot.ts

@@ -1211,10 +1211,10 @@ function createMarkShapeFunction(
   const point2d = data.map((d) => d.points);
   const { theme, coordinate } = view;
   const { type: markType, style = {} } = mark;
-  return (data, index) => {
+  return (data) => {
     const { shape: styleShape = defaultShape } = style;
     const { shape = styleShape, points, seriesIndex, index: i, ...v } = data;
-    const value = { ...v, shape, mark: markType, defaultShape, index };
+    const value = { ...v, shape, mark: markType, defaultShape, index: i };
 
     // Get data-driven style.
     // If it is a series shape, such as area and line,