fix(update): skip empty selection (close: #4490)

__tests__/integration/animations/index.ts

@@ -16,3 +16,4 @@ export { sexIntervalKeyframe } from './sex-interval-keyframe';
 export { soldIntervalKeyframe } from './sold-interval-keyframe';
 export { soldIntervalPieKeyframe } from './sold-interval-pie-keyframe';
 export { aaplAreaKeyframe } from './aapl-area-keyframe';
+export { profitIntervalRange } from './profit-interval-range';

__tests__/integration/animations/profit-interval-range.ts

@@ -0,0 +1,64 @@
+import { G2Spec } from '../../../src';
+import { profit } from '../data/profit';
+
+export async function profitIntervalRange(): Promise<G2Spec> {
+  return {
+    type: 'timingKeyframe',
+    children: [
+      {
+        type: 'view',
+        paddingLeft: 60,
+        children: [
+          {
+            type: 'interval',
+            key: 'interval',
+            data: profit,
+            axis: { y: { labelFormatter: '~s' } },
+            encode: {
+              x: 'month',
+              y: ['end', 'start'],
+              color: (d) =>
+                d.month === 'Total'
+                  ? 'Total'
+                  : d.profit > 0
+                  ? 'Increase'
+                  : 'Decrease',
+            },
+          },
+        ],
+      },
+      {
+        type: 'view',
+        paddingLeft: 60,
+        children: [
+          {
+            type: 'interval',
+            key: 'interval',
+            data: profit,
+            axis: { y: { labelFormatter: '~s' } },
+            encode: {
+              x: 'month',
+              y: ['end', 'start'],
+              color: (d) =>
+                d.month === 'Total'
+                  ? 'Total'
+                  : d.profit > 0
+                  ? 'Increase'
+                  : 'Decrease',
+            },
+          },
+          {
+            type: 'rangeY',
+            data: [{ y: [0, 2000000] }],
+            encode: { y: 'y' },
+            animate: {
+              enterType: 'fadeIn',
+            },
+          },
+        ],
+      },
+    ],
+  };
+}
+
+profitIntervalRange.intervals = [false, false, [500]];

src/runtime/plot.ts

@@ -1204,6 +1204,11 @@ function shapeName(mark: G2Mark, name: string): string {
  */
 function updateLayers(selection: Selection, marks: G2Mark[]) {
   const facet = (d) => (d.class !== undefined ? `${d.class}` : '');
+
+  // Skip for empty selection, it can't append nodes.
+  const nodes = selection.nodes();
+  if (nodes.length === 0) return;
+
   selection
     .selectAll(className(MAIN_LAYER_CLASS_NAME))
     .data(marks, (d) => d.key)