fix(pie): interaction for composite mark

__tests__/plots/interaction/index.ts

@@ -69,3 +69,4 @@ export { commitsPointLegendFilter } from './commits-point-legend-filter';
 export { settleWeatherLegendFilter } from './seattle-weather-legend-filter';
 export { countriesBubbleMultiLegends } from './countries-bubble-multi-legends';
 export { pointsPointTooltipMarker } from './points-point-tooltip-marker';
+export { mockPieInteraction } from './mock-pie-interaction';

__tests__/plots/interaction/mock-pie-interaction.ts

@@ -0,0 +1,40 @@
+import { deepMix } from '@antv/util';
+import { G2Spec } from '../../../src';
+import { LEGEND_ITEMS_CLASS_NAME } from '../../../src/interaction/legendFilter';
+import { step } from './utils';
+
+function Pie(options, context) {
+  const { encode = {}, ...rest } = options;
+  const { value, ...restEncode } = encode;
+  return deepMix(rest, {
+    type: 'interval',
+    transform: [{ type: 'stackY' }],
+    coordinate: { type: 'theta' },
+    encode: {
+      ...restEncode,
+      y: value,
+    },
+  });
+}
+
+export function mockPieInteraction(): G2Spec {
+  return {
+    type: Pie,
+    data: [
+      { genre: 'Sports', sold: 275 },
+      { genre: 'Strategy', sold: 115 },
+      { genre: 'Action', sold: 120 },
+      { genre: 'Shooter', sold: 350 },
+      { genre: 'Other', sold: 150 },
+    ],
+    // @ts-ignore
+    encode: { value: 'sold', color: 'genre' },
+    animate: false,
+  };
+}
+
+mockPieInteraction.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const [e] = document.getElementsByClassName(LEGEND_ITEMS_CLASS_NAME);
+  return [step(e, 'click')];
+};

src/runtime/plot.ts

@@ -422,11 +422,14 @@ async function initializeView(
   const flattenOptions = await transformMarks(options, library);
 
   const mergedOptions = bubbleOptions(flattenOptions);
+
   // @todo Remove this.
   // !!! NOTE: Mute original view options.
   // Update interaction and coordinate for this view.
   options.interaction = mergedOptions.interaction;
   options.coordinate = mergedOptions.coordinate;
+  // @ts-ignore
+  options.marks = [...mergedOptions.marks, ...mergedOptions.components];
 
   const transformedOptions = coordinate2Transform(mergedOptions, library);
   const state = await initializeMarks(transformedOptions, library);

src/utils/helper.ts

@@ -45,7 +45,15 @@ export function copyAttributes(target: DisplayObject, source: DisplayObject) {
   const { attributes } = source;
   const exclude = new Set(['id', 'className']);
   for (const [key, value] of Object.entries(attributes)) {
-    if (!exclude.has(key)) target.attr(key, value);
+    if (!exclude.has(key)) {
+      // @todo Fix in @antv/g
+      if (key === 'transform') {
+        target.attr(key, '');
+        target.attr(key, value);
+      } else {
+        target.attr(key, value);
+      }
+    }
   }
 }