diff --git a/packages/g6/__tests__/demo/animation/animation-breathe.ts b/packages/g6/__tests__/demo/animation/animation-breathe.ts
index b86ba9a2039..bb2fc0372f5 100644
--- a/packages/g6/__tests__/demo/animation/animation-breathe.ts
+++ b/packages/g6/__tests__/demo/animation/animation-breathe.ts
@@ -8,14 +8,14 @@ import type { AnimationTestCase } from '../types';
 type ShapeStyleProps = BaseShapeStyleProps & { size: number; color: string; outline: number; outlineOpacity: number };
 
 class Shape extends BaseShape<ShapeStyleProps> {
-  private getKeyStyle({ size, color }: any = this.attributes) {
+  private getKeyStyle({ size, color } = this.attributes) {
     return {
       r: size / 2,
       fill: color,
     };
   }
 
-  private getHaloStyle({ size, color, outline, outlineOpacity }: any = this.attributes) {
+  private getHaloStyle({ size, color, outline, outlineOpacity } = this.attributes) {
     return {
       r: size / 2,
       fill: 'transparent',
diff --git a/packages/g6/__tests__/demo/animation/animation-fade-in.ts b/packages/g6/__tests__/demo/animation/animation-fade-in.ts
index 83f5ea0bf8b..6f1df78417d 100644
--- a/packages/g6/__tests__/demo/animation/animation-fade-in.ts
+++ b/packages/g6/__tests__/demo/animation/animation-fade-in.ts
@@ -8,14 +8,14 @@ import type { AnimationTestCase } from '../types';
 type ShapeStyleProps = BaseShapeStyleProps & { size: number; color: string };
 
 class Shape extends BaseShape<ShapeStyleProps> {
-  private getKeyStyle({ size, color }: any = this.attributes) {
+  private getKeyStyle({ size, color } = this.attributes) {
     return {
       r: size / 2,
       fill: color,
     };
   }
 
-  private getHaloStyle({ size, color }: any = this.attributes) {
+  private getHaloStyle({ size, color } = this.attributes) {
     return {
       r: size / 2 + 2,
       fill: 'transparent',
diff --git a/packages/g6/__tests__/demo/animation/animation-translate.ts b/packages/g6/__tests__/demo/animation/animation-translate.ts
index 072e89c206d..ed16381c013 100644
--- a/packages/g6/__tests__/demo/animation/animation-translate.ts
+++ b/packages/g6/__tests__/demo/animation/animation-translate.ts
@@ -8,14 +8,14 @@ import type { AnimationTestCase } from '../types';
 type ShapeStyleProps = BaseShapeStyleProps & { size: number; color: string };
 
 class Shape extends BaseShape<ShapeStyleProps> {
-  private getKeyStyle({ size, color }: any = this.attributes) {
+  private getKeyStyle({ size, color } = this.attributes) {
     return {
       r: size / 2,
       fill: color,
     };
   }
 
-  private getHaloStyle({ size, color }: any = this.attributes) {
+  private getHaloStyle({ size, color } = this.attributes) {
     return {
       r: size / 2 + 2,
       fill: 'transparent',
diff --git a/packages/g6/__tests__/demo/animation/animation-wave.ts b/packages/g6/__tests__/demo/animation/animation-wave.ts
index 4d6920e8fd8..3a49b3c5120 100644
--- a/packages/g6/__tests__/demo/animation/animation-wave.ts
+++ b/packages/g6/__tests__/demo/animation/animation-wave.ts
@@ -8,7 +8,7 @@ import type { AnimationTestCase } from '../types';
 type ShapeStyleProps = BaseShapeStyleProps & { size: number; color: string };
 
 class Shape extends BaseShape<ShapeStyleProps> {
-  private getInnerStyle({ size, color, opacity }: any = this.attributes) {
+  private getInnerStyle({ size, color, opacity } = this.attributes) {
     return {
       r: size / 2,
       fill: color,
@@ -16,7 +16,7 @@ class Shape extends BaseShape<ShapeStyleProps> {
     };
   }
 
-  private getMiddleStyle({ size, color, opacity }: any = this.attributes) {
+  private getMiddleStyle({ size, color, opacity } = this.attributes) {
     return {
       r: size / 2,
       fill: color,
@@ -24,7 +24,7 @@ class Shape extends BaseShape<ShapeStyleProps> {
     };
   }
 
-  private getOuterStyle({ size, color, opacity }: any = this.attributes) {
+  private getOuterStyle({ size, color, opacity } = this.attributes) {
     return {
       r: size / 2,
       fill: color,
diff --git a/packages/g6/__tests__/demo/animation/animation-zoom-in.ts b/packages/g6/__tests__/demo/animation/animation-zoom-in.ts
index 5fa6fc0ede1..85bf9b524ab 100644
--- a/packages/g6/__tests__/demo/animation/animation-zoom-in.ts
+++ b/packages/g6/__tests__/demo/animation/animation-zoom-in.ts
@@ -8,14 +8,14 @@ import type { AnimationTestCase } from '../types';
 type ShapeStyleProps = BaseShapeStyleProps & { size: number; color: string; outline: number; outlineOpacity: number };
 
 class Shape extends BaseShape<ShapeStyleProps> {
-  private getKeyStyle({ size, color }: any = this.attributes) {
+  private getKeyStyle({ size, color } = this.attributes) {
     return {
       r: size / 2,
       fill: color,
     };
   }
 
-  private getHaloStyle({ size, color, outline, outlineOpacity }: any = this.attributes) {
+  private getHaloStyle({ size, color, outline, outlineOpacity } = this.attributes) {
     return {
       r: size / 2,
       fill: 'transparent',
diff --git a/packages/g6/__tests__/demo/case/combo.ts b/packages/g6/__tests__/demo/case/combo.ts
index d41a8cff3ea..09bea3763bf 100644
--- a/packages/g6/__tests__/demo/case/combo.ts
+++ b/packages/g6/__tests__/demo/case/combo.ts
@@ -31,12 +31,12 @@ export const combo: STDTestCase = async (context) => {
     data,
     node: {
       style: {
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id,
       },
     },
     combo: {
       style: {
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id,
         lineDash: 0,
         collapsedLineDash: [5, 5],
       },
@@ -60,14 +60,13 @@ export const combo: STDTestCase = async (context) => {
   const COLLAPSED_MARKER_TYPE = ['child-count', 'descendant-count', 'node-count', 'custom'];
 
   combo.form = (panel) => {
-    const config = {
+    const config: Record<string, any> = {
       combo2Type: 'circle',
       collapsedOrigin: 'top',
       collapsedMarker: true,
       collapsedMarkerType: 'child-count',
       collapseCombo1: () => {
-        graph.updateComboData((data) => [
-          ...data,
+        graph.updateComboData([
           {
             id: 'combo-1',
             style: {
@@ -76,7 +75,7 @@ export const combo: STDTestCase = async (context) => {
               collapsedMarker: config.collapsedMarker,
               collapsedMarkerType:
                 config.collapsedMarkerType === 'custom'
-                  ? (children: any) => children.length.toString() + 'nodes'
+                  ? (children) => children.length.toString() + 'nodes'
                   : config.collapsedMarkerType,
             },
           },
@@ -84,8 +83,7 @@ export const combo: STDTestCase = async (context) => {
         graph.render();
       },
       expandCombo1: () => {
-        graph.updateComboData((data) => [
-          ...data,
+        graph.updateComboData([
           {
             id: 'combo-1',
             style: {
@@ -108,7 +106,7 @@ export const combo: STDTestCase = async (context) => {
               collapsedMarker: config.collapsedMarker,
               collapsedMarkerType:
                 config.collapsedMarkerType === 'custom'
-                  ? (children: any) => children.length.toString() + 'nodes'
+                  ? (children) => children.length.toString() + 'nodes'
                   : config.collapsedMarkerType,
             },
           },
@@ -116,8 +114,7 @@ export const combo: STDTestCase = async (context) => {
         graph.render();
       },
       expandCombo2: () => {
-        graph.updateComboData((data) => [
-          ...data,
+        graph.updateComboData([
           {
             id: 'combo-2',
             style: {
@@ -151,21 +148,12 @@ export const combo: STDTestCase = async (context) => {
       panel.add(config, 'combo2Type', COMBO_TYPE).onChange((type: string) => {
         config.combo2Type = type;
         const combo2Data = graph.getComboData('combo-2');
-        graph.updateComboData((data) => [
-          ...data,
-          { ...combo2Data, style: { ...combo2Data.style, type: config.combo2Type } },
-        ]);
+        graph.updateComboData([{ ...combo2Data, style: { ...combo2Data.style, type: config.combo2Type } }]);
         graph.render();
       }),
-      panel.add(config, 'collapsedOrigin', COLLAPSED_ORIGIN).onChange((collapsedOrigin: string) => {
-        config.collapsedOrigin = collapsedOrigin;
-      }),
-      panel.add(config, 'collapsedMarker').onChange((collapsedMarker: boolean) => {
-        config.collapsedMarker = collapsedMarker;
-      }),
-      panel.add(config, 'collapsedMarkerType', COLLAPSED_MARKER_TYPE).onChange((collapsedMarkerType: string) => {
-        config.collapsedMarkerType = collapsedMarkerType;
-      }),
+      panel.add(config, 'collapsedOrigin', COLLAPSED_ORIGIN),
+      panel.add(config, 'collapsedMarker'),
+      panel.add(config, 'collapsedMarkerType', COLLAPSED_MARKER_TYPE),
       panel.add(config, 'collapseCombo1'),
       panel.add(config, 'expandCombo1'),
       panel.add(config, 'collapseCombo2'),
diff --git a/packages/g6/__tests__/demo/case/common-graph.ts b/packages/g6/__tests__/demo/case/common-graph.ts
index 42a7b0ba60e..ba4c5b1a959 100644
--- a/packages/g6/__tests__/demo/case/common-graph.ts
+++ b/packages/g6/__tests__/demo/case/common-graph.ts
@@ -8,7 +8,7 @@ export const commonGraph: STDTestCase = async (context) => {
     data,
     node: {
       style: {
-        fill: (d: any) => (d.id === '33' ? '#d4414c' : '#2f363d'),
+        fill: (d) => (d.id === '33' ? '#d4414c' : '#2f363d'),
       },
     },
     layout: { type: 'd3force' },
diff --git a/packages/g6/__tests__/demo/case/element-port.ts b/packages/g6/__tests__/demo/case/element-port.ts
index 967edf4291f..5f999c22d5c 100644
--- a/packages/g6/__tests__/demo/case/element-port.ts
+++ b/packages/g6/__tests__/demo/case/element-port.ts
@@ -1,4 +1,5 @@
 import { Graph } from '@/src';
+import { idOf } from '@/src/utils/id';
 import type { STDTestCase } from '../types';
 
 export const elementPort: STDTestCase = async (context) => {
@@ -25,10 +26,10 @@ export const elementPort: STDTestCase = async (context) => {
     },
     node: {
       style: {
-        type: (d: any) => (d.id === 'node-1' ? 'circle' : 'rect'),
-        size: (d: any) => (d.id === 'node-1' ? 30 : [50, 150]),
+        type: (d) => (d.id === 'node-1' ? 'circle' : 'rect'),
+        size: (d) => (d.id === 'node-1' ? 30 : [50, 150]),
         port: true,
-        ports: (d: any) =>
+        ports: (d) =>
           d.id === 'node-2'
             ? [
                 { key: 'port-1', placement: [0, 0.15] },
@@ -41,7 +42,7 @@ export const elementPort: STDTestCase = async (context) => {
     edge: {
       style: {
         endArrow: true,
-        targetPort: (d: any) => `port-${d.id.split('-')[1]}`,
+        targetPort: (d) => `port-${idOf(d).toString().split('-')[1]}`,
       },
     },
   });
diff --git a/packages/g6/__tests__/demo/case/element-visibility.ts b/packages/g6/__tests__/demo/case/element-visibility.ts
index 5115938c933..e79ebc25831 100644
--- a/packages/g6/__tests__/demo/case/element-visibility.ts
+++ b/packages/g6/__tests__/demo/case/element-visibility.ts
@@ -18,8 +18,8 @@ export const elementVisibility: STDTestCase = async (context) => {
       ],
     },
     theme: 'light',
-    node: { style: { size: 20, labelText: (d: any) => d.id.at(-1) } },
-    edge: { style: { endArrow: true, labelText: (d: any) => d.id } },
+    node: { style: { size: 20, labelText: (d) => d.id!.toString().at(-1)! } },
+    edge: { style: { endArrow: true, labelText: (d) => d.id! } },
   });
 
   await graph.render();
diff --git a/packages/g6/__tests__/demo/case/layout-circular-degree.ts b/packages/g6/__tests__/demo/case/layout-circular-degree.ts
index dc7a9c7e4d0..31de257c466 100644
--- a/packages/g6/__tests__/demo/case/layout-circular-degree.ts
+++ b/packages/g6/__tests__/demo/case/layout-circular-degree.ts
@@ -9,7 +9,7 @@ export const layoutCircularDegree: STDTestCase = async (context) => {
     data,
     node: {
       style: {
-        labelText: (d: { id: string }) => d.id,
+        labelText: (d) => d.id,
       },
     },
     edge: {
diff --git a/packages/g6/__tests__/demo/case/layout-circular-division.ts b/packages/g6/__tests__/demo/case/layout-circular-division.ts
index f041478a4c1..adf16ad391c 100644
--- a/packages/g6/__tests__/demo/case/layout-circular-division.ts
+++ b/packages/g6/__tests__/demo/case/layout-circular-division.ts
@@ -9,7 +9,7 @@ export const layoutCircularDivision: STDTestCase = async (context) => {
     data,
     node: {
       style: {
-        labelText: (d: { id: string }) => d.id,
+        labelText: (d) => d.id,
       },
     },
     edge: {
diff --git a/packages/g6/__tests__/demo/case/layout-circular-spiral.ts b/packages/g6/__tests__/demo/case/layout-circular-spiral.ts
index f1018079005..e80e435d636 100644
--- a/packages/g6/__tests__/demo/case/layout-circular-spiral.ts
+++ b/packages/g6/__tests__/demo/case/layout-circular-spiral.ts
@@ -9,7 +9,7 @@ export const layoutCircularSpiral: STDTestCase = async (context) => {
     data,
     node: {
       style: {
-        labelText: (d: { id: string }) => d.id,
+        labelText: (d) => d.id,
       },
     },
     edge: {
diff --git a/packages/g6/__tests__/demo/case/layout-combo-combined.ts b/packages/g6/__tests__/demo/case/layout-combo-combined.ts
index d4f63078a10..88a68fc4b57 100644
--- a/packages/g6/__tests__/demo/case/layout-combo-combined.ts
+++ b/packages/g6/__tests__/demo/case/layout-combo-combined.ts
@@ -2,14 +2,6 @@ import { Graph } from '@/src';
 import data from '@@/dataset/combo.json';
 import type { STDTestCase } from '../types';
 
-type Item = {
-  id: string;
-  data: {
-    size?: number;
-    color?: string;
-  };
-};
-
 export const layoutComboCombined: STDTestCase = async (context) => {
   const graph = new Graph({
     ...context,
@@ -21,13 +13,12 @@ export const layoutComboCombined: STDTestCase = async (context) => {
     node: {
       style: {
         size: 20,
-        labelText: (d: Item) => d.id,
+        labelText: (d) => d.id,
       },
     },
     edge: {
-      // @ts-expect-error
-      style: (model: Item) => {
-        const { size, color } = model.data;
+      style: (model) => {
+        const { size, color } = model.data as { size: number; color: string };
         return { stroke: color || '#99ADD1', lineWidth: size || 1 };
       },
     },
diff --git a/packages/g6/__tests__/demo/case/layout-dagre-flow-combo.ts b/packages/g6/__tests__/demo/case/layout-dagre-flow-combo.ts
index 034d58714d1..70c01d76cca 100644
--- a/packages/g6/__tests__/demo/case/layout-dagre-flow-combo.ts
+++ b/packages/g6/__tests__/demo/case/layout-dagre-flow-combo.ts
@@ -2,13 +2,6 @@ import { Graph } from '@/src';
 import data from '@@/dataset/dagre-combo.json';
 import type { STDTestCase } from '../types';
 
-type Item = {
-  id: string;
-  style: {
-    parentId: string;
-  };
-};
-
 export const layoutDagreFlowCombo: STDTestCase = async (context) => {
   const graph = new Graph({
     ...context,
@@ -19,11 +12,11 @@ export const layoutDagreFlowCombo: STDTestCase = async (context) => {
         type: 'rect',
         size: [60, 30],
         radius: 8,
-        labelText: (d: Item) => d.id,
+        labelText: (d) => d.id,
         labelPlacement: 'center',
       },
       palette: {
-        field: (d: any) => d.style?.parentId,
+        field: (d) => d.style?.parentId,
       },
     },
     edge: {
@@ -36,7 +29,7 @@ export const layoutDagreFlowCombo: STDTestCase = async (context) => {
       style: {
         type: 'rect',
         radius: 8,
-        labelText: (d: Item) => d.id,
+        labelText: (d) => d.id,
         lineDash: 0,
         collapsedLineDash: [5, 5],
       },
diff --git a/packages/g6/__tests__/demo/case/layout-dagre-flow.ts b/packages/g6/__tests__/demo/case/layout-dagre-flow.ts
index 634e3ace47b..e26785b3661 100644
--- a/packages/g6/__tests__/demo/case/layout-dagre-flow.ts
+++ b/packages/g6/__tests__/demo/case/layout-dagre-flow.ts
@@ -13,7 +13,7 @@ export const layoutDagreFlow: STDTestCase = async (context) => {
         size: [60, 30],
         radius: 8,
         labelPlacement: 'center',
-        labelText: (d: { id: string }) => d.id,
+        labelText: (d) => d.id,
       },
     },
     edge: {
diff --git a/packages/g6/__tests__/demo/case/layout-force.ts b/packages/g6/__tests__/demo/case/layout-force.ts
index f2ec7c14b8d..0221f68847a 100644
--- a/packages/g6/__tests__/demo/case/layout-force.ts
+++ b/packages/g6/__tests__/demo/case/layout-force.ts
@@ -14,7 +14,7 @@ export const layoutForce: STDTestCase = async (context) => {
     },
     node: {
       style: {
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id,
         labelMaxWidth: '300%',
       },
       palette: {
diff --git a/packages/g6/__tests__/demo/case/layout-fruchterman-basic.ts b/packages/g6/__tests__/demo/case/layout-fruchterman-basic.ts
index 6437224c72b..1a748ad9da6 100644
--- a/packages/g6/__tests__/demo/case/layout-fruchterman-basic.ts
+++ b/packages/g6/__tests__/demo/case/layout-fruchterman-basic.ts
@@ -9,7 +9,7 @@ export const layoutFruchtermanBasic: STDTestCase = async (context) => {
     node: {
       style: {
         labelPlacement: 'center',
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id,
       },
     },
     layout: {
diff --git a/packages/g6/__tests__/demo/case/layout-fruchterman-cluster.ts b/packages/g6/__tests__/demo/case/layout-fruchterman-cluster.ts
index 5d51cf37f0c..ec05f7dcd33 100644
--- a/packages/g6/__tests__/demo/case/layout-fruchterman-cluster.ts
+++ b/packages/g6/__tests__/demo/case/layout-fruchterman-cluster.ts
@@ -9,7 +9,7 @@ export const layoutFruchtermanCluster: STDTestCase = async (context) => {
     node: {
       style: {
         labelPlacement: 'center',
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id,
       },
       palette: {
         field: 'cluster',
diff --git a/packages/g6/__tests__/demo/case/layout-grid.ts b/packages/g6/__tests__/demo/case/layout-grid.ts
index 9244dfde359..864827ee16e 100644
--- a/packages/g6/__tests__/demo/case/layout-grid.ts
+++ b/packages/g6/__tests__/demo/case/layout-grid.ts
@@ -8,7 +8,7 @@ export const layoutGrid: STDTestCase = async (context) => {
     data,
     node: {
       style: {
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id,
       },
     },
     layout: {
diff --git a/packages/g6/__tests__/demo/case/layout-mds.ts b/packages/g6/__tests__/demo/case/layout-mds.ts
index a1aa6d269b3..18570108cca 100644
--- a/packages/g6/__tests__/demo/case/layout-mds.ts
+++ b/packages/g6/__tests__/demo/case/layout-mds.ts
@@ -10,7 +10,7 @@ export const layoutMDS: STDTestCase = async (context) => {
     data,
     node: {
       style: {
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id,
         labelPlacement: 'center',
       },
     },
diff --git a/packages/g6/__tests__/demo/case/layout-radial-basic.ts b/packages/g6/__tests__/demo/case/layout-radial-basic.ts
index 2c5ade43db2..7e596b2081c 100644
--- a/packages/g6/__tests__/demo/case/layout-radial-basic.ts
+++ b/packages/g6/__tests__/demo/case/layout-radial-basic.ts
@@ -8,7 +8,7 @@ export const layoutRadialBasic: STDTestCase = async (context) => {
     data,
     node: {
       style: {
-        labelText: (d: { id: string }) => d.id,
+        labelText: (d) => d.id,
         labelPlacement: 'center',
       },
     },
diff --git a/packages/g6/__tests__/demo/case/layout-radial-configuration-translate.ts b/packages/g6/__tests__/demo/case/layout-radial-configuration-translate.ts
index a06cda2c3ed..10173cdb846 100644
--- a/packages/g6/__tests__/demo/case/layout-radial-configuration-translate.ts
+++ b/packages/g6/__tests__/demo/case/layout-radial-configuration-translate.ts
@@ -8,7 +8,7 @@ export const layoutRadialConfigurationTranslate: STDTestCase = async (context) =
     data,
     node: {
       style: {
-        labelText: (d: { id: string }) => d.id,
+        labelText: (d) => d.id,
         labelPlacement: 'center',
       },
     },
diff --git a/packages/g6/__tests__/demo/case/layout-radial-prevent-overlap-unstrict.ts b/packages/g6/__tests__/demo/case/layout-radial-prevent-overlap-unstrict.ts
index 665af7a2317..a63cbe3dab2 100644
--- a/packages/g6/__tests__/demo/case/layout-radial-prevent-overlap-unstrict.ts
+++ b/packages/g6/__tests__/demo/case/layout-radial-prevent-overlap-unstrict.ts
@@ -8,7 +8,7 @@ export const layoutRadialPreventOverlapUnstrict: STDTestCase = async (context) =
     data,
     node: {
       style: {
-        labelText: (d: { id: string }) => d.id,
+        labelText: (d) => d.id,
         labelPlacement: 'center',
       },
     },
diff --git a/packages/g6/__tests__/demo/case/layout-radial-prevent-overlap.ts b/packages/g6/__tests__/demo/case/layout-radial-prevent-overlap.ts
index 0ff29f30eaf..46d871c2156 100644
--- a/packages/g6/__tests__/demo/case/layout-radial-prevent-overlap.ts
+++ b/packages/g6/__tests__/demo/case/layout-radial-prevent-overlap.ts
@@ -8,7 +8,7 @@ export const layoutRadialPreventOverlap: STDTestCase = async (context) => {
     data,
     node: {
       style: {
-        labelText: (d: { id: string }) => d.id,
+        labelText: (d) => d.id,
         labelPlacement: 'center',
       },
     },
diff --git a/packages/g6/__tests__/demo/case/layout-radial-sort.ts b/packages/g6/__tests__/demo/case/layout-radial-sort.ts
index 9018b3cdfd7..567ed0ee21f 100644
--- a/packages/g6/__tests__/demo/case/layout-radial-sort.ts
+++ b/packages/g6/__tests__/demo/case/layout-radial-sort.ts
@@ -8,7 +8,7 @@ export const layoutRadialSort: STDTestCase = async (context) => {
     data,
     node: {
       style: {
-        labelText: (d: { id: string }) => d.id,
+        labelText: (d) => d.id,
         labelPlacement: 'center',
       },
     },
diff --git a/packages/g6/__tests__/demo/case/viewport-fit.ts b/packages/g6/__tests__/demo/case/viewport-fit.ts
index a2488e9de24..f77e28de145 100644
--- a/packages/g6/__tests__/demo/case/viewport-fit.ts
+++ b/packages/g6/__tests__/demo/case/viewport-fit.ts
@@ -15,7 +15,7 @@ export const viewportFit: STDTestCase = async (context) => {
     node: {
       style: {
         size: 50,
-        color: (d: any) => (d.id === '1' ? '#d4414c' : '#2f363d'),
+        color: (d) => (d.id === '1' ? '#d4414c' : '#2f363d'),
       },
     },
     behaviors: ['zoom-canvas', 'drag-canvas'],
diff --git a/packages/g6/__tests__/demo/static/controller-layout-compact-box.ts b/packages/g6/__tests__/demo/static/controller-layout-compact-box.ts
index 985a034ef5a..118d85a76a9 100644
--- a/packages/g6/__tests__/demo/static/controller-layout-compact-box.ts
+++ b/packages/g6/__tests__/demo/static/controller-layout-compact-box.ts
@@ -1,4 +1,4 @@
-import type { G6Spec } from '@/src';
+import type { G6Spec, NodeData } from '@/src';
 import { Graph, Utils } from '@/src';
 import tree from '@@/dataset/algorithm-category.json';
 import type { STDTestCase } from '../types';
@@ -14,7 +14,7 @@ export const controllerLayoutCompactBox: STDTestCase = async (context) => {
     layout: {
       type: 'compact-box',
       direction: 'LR',
-      getId: function getId(d: any) {
+      getId: function getId(d: NodeData) {
         return d.id;
       },
       getHeight: function getHeight() {
@@ -26,14 +26,14 @@ export const controllerLayoutCompactBox: STDTestCase = async (context) => {
       getHGap: function getHGap() {
         return 100;
       },
-      getWidth: function getWidth(d: any) {
-        return d.id.length + 20;
+      getWidth: function getWidth(d: NodeData) {
+        return d.id.toString().length + 20;
       },
     },
     node: {
       style: {
         size: 20,
-        labelText: (data: any) => data.id,
+        labelText: (data) => data.id,
         labelMaxWidth: 250,
         labelPlacement: 'right',
         labelOffsetX: 10,
diff --git a/packages/g6/__tests__/demo/static/controller-layout-dendrogram.ts b/packages/g6/__tests__/demo/static/controller-layout-dendrogram.ts
index f652905385a..c2a22d70c9e 100644
--- a/packages/g6/__tests__/demo/static/controller-layout-dendrogram.ts
+++ b/packages/g6/__tests__/demo/static/controller-layout-dendrogram.ts
@@ -20,7 +20,7 @@ export const controllerLayoutDendrogram: STDTestCase = async (context) => {
     node: {
       style: {
         size: 20,
-        labelText: (data: any) => data.id,
+        labelText: (data) => data.id,
         labelPlacement: 'right',
         labelMaxWidth: 200,
         ports: [
diff --git a/packages/g6/__tests__/demo/static/controller-layout-force.ts b/packages/g6/__tests__/demo/static/controller-layout-force.ts
index 0f5daf59fa9..1e456f3c8f3 100644
--- a/packages/g6/__tests__/demo/static/controller-layout-force.ts
+++ b/packages/g6/__tests__/demo/static/controller-layout-force.ts
@@ -4,6 +4,7 @@ import data from '@@/dataset/cluster.json';
 import type { STDTestCase } from '../types';
 
 export const controllerLayoutForce: STDTestCase = async (context) => {
+  const colors = { a: '#cd2f3b', b: '#005cc5', c: '#1e7834', d: '#ff9f45' };
   const options: G6Spec = {
     ...context,
     data,
@@ -20,8 +21,7 @@ export const controllerLayoutForce: STDTestCase = async (context) => {
       style: {
         size: 20,
         lineWidth: 0,
-        fill: (data: { style: { cluster: string } }) =>
-          ({ a: '#cd2f3b', b: '#005cc5', c: '#1e7834', d: '#ff9f45' })[data.style.cluster],
+        fill: (data) => colors[data.style!.cluster as keyof typeof colors],
       },
     },
   };
diff --git a/packages/g6/__tests__/demo/static/edge-arrow.ts b/packages/g6/__tests__/demo/static/edge-arrow.ts
index 84cfa9e56b6..f38d3b2898f 100644
--- a/packages/g6/__tests__/demo/static/edge-arrow.ts
+++ b/packages/g6/__tests__/demo/static/edge-arrow.ts
@@ -1,4 +1,5 @@
 import { Graph } from '@/src';
+import { idOf } from '@/src/utils/id';
 import type { StaticTestCase } from '../types';
 
 export const edgeArrow: StaticTestCase = async (context) => {
@@ -28,10 +29,10 @@ export const edgeArrow: StaticTestCase = async (context) => {
     edge: {
       style: {
         type: 'line', // 👈🏻 Edge shape type.
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id!,
         labelBackground: true,
         endArrow: true,
-        endArrowType: (d: any) => d.id.split('-')[0],
+        endArrowType: (d: any) => idOf(d).toString().split('-')[0] as any,
       },
     },
     layout: {
diff --git a/packages/g6/__tests__/demo/static/edge-cubic-horizontal.ts b/packages/g6/__tests__/demo/static/edge-cubic-horizontal.ts
index fdecadda551..78bb1889454 100644
--- a/packages/g6/__tests__/demo/static/edge-cubic-horizontal.ts
+++ b/packages/g6/__tests__/demo/static/edge-cubic-horizontal.ts
@@ -48,7 +48,7 @@ export const edgeCubicHorizontal: StaticTestCase = async (context) => {
     edge: {
       style: {
         type: 'cubic-horizontal', // 👈🏻 Edge shape type.
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id!,
         labelBackground: true,
         endArrow: true,
       },
diff --git a/packages/g6/__tests__/demo/static/edge-cubic-vertical.ts b/packages/g6/__tests__/demo/static/edge-cubic-vertical.ts
index fb394a2e9a9..8e3743ac5d8 100644
--- a/packages/g6/__tests__/demo/static/edge-cubic-vertical.ts
+++ b/packages/g6/__tests__/demo/static/edge-cubic-vertical.ts
@@ -48,7 +48,7 @@ export const edgeCubicVertical: StaticTestCase = async (context) => {
     edge: {
       style: {
         type: 'cubic-vertical', // 👈🏻 Edge shape type.
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id!,
         labelBackground: true,
         endArrow: true,
       },
diff --git a/packages/g6/__tests__/demo/static/edge-cubic.ts b/packages/g6/__tests__/demo/static/edge-cubic.ts
index 5695b738b25..8e2b4064240 100644
--- a/packages/g6/__tests__/demo/static/edge-cubic.ts
+++ b/packages/g6/__tests__/demo/static/edge-cubic.ts
@@ -42,7 +42,7 @@ export const edgeCubic: StaticTestCase = async (context) => {
     edge: {
       style: {
         type: 'cubic', // 👈🏻 Edge shape type.
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id!,
         labelBackground: true,
         endArrow: true,
       },
diff --git a/packages/g6/__tests__/demo/static/edge-custom-arrow.ts b/packages/g6/__tests__/demo/static/edge-custom-arrow.ts
index c52914dbacd..4142a4a837c 100644
--- a/packages/g6/__tests__/demo/static/edge-custom-arrow.ts
+++ b/packages/g6/__tests__/demo/static/edge-custom-arrow.ts
@@ -43,7 +43,7 @@ export const edgeCustomArrow: StaticTestCase = async (context) => {
       style: {
         type: 'line', // 👈🏻 Edge shape type.
         color: '#F6BD16',
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id!,
         labelBackground: true,
         endArrow: true,
       },
diff --git a/packages/g6/__tests__/demo/static/edge-line.ts b/packages/g6/__tests__/demo/static/edge-line.ts
index 258b0d5b15b..4d54321f2ee 100644
--- a/packages/g6/__tests__/demo/static/edge-line.ts
+++ b/packages/g6/__tests__/demo/static/edge-line.ts
@@ -42,7 +42,7 @@ export const edgeLine: StaticTestCase = async (context) => {
     edge: {
       style: {
         type: 'line', // 👈🏻 Edge shape type.
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id!,
         labelBackground: true,
         endArrow: true,
       },
diff --git a/packages/g6/__tests__/demo/static/edge-loop-curve.ts b/packages/g6/__tests__/demo/static/edge-loop-curve.ts
index 17c3f55cfcc..fd34f84816e 100644
--- a/packages/g6/__tests__/demo/static/edge-loop-curve.ts
+++ b/packages/g6/__tests__/demo/static/edge-loop-curve.ts
@@ -1,4 +1,5 @@
 import { Graph } from '@/src';
+import { idOf } from '@/src/utils/id';
 import type { StaticTestCase } from '../types';
 
 export const edgeLoopCurve: StaticTestCase = async (context) => {
@@ -9,49 +10,49 @@ export const edgeLoopCurve: StaticTestCase = async (context) => {
         id: 'loop-1',
         source: 'node1',
         target: 'node1',
-        placement: 'top',
+        style: { placement: 'top' },
       },
       {
         id: 'loop-2',
         source: 'node1',
         target: 'node1',
-        placement: 'right',
+        style: { placement: 'right' },
       },
       {
         id: 'loop-3',
         source: 'node1',
         target: 'node1',
-        placement: 'bottom',
+        style: { placement: 'bottom' },
       },
       {
         id: 'loop-4',
         source: 'node1',
         target: 'node1',
-        placement: 'left',
+        style: { placement: 'left' },
       },
       {
         id: 'loop-5',
         source: 'node2',
         target: 'node2',
-        placement: 'top-right',
+        style: { placement: 'top-right' },
       },
       {
         id: 'loop-6',
         source: 'node2',
         target: 'node2',
-        placement: 'bottom-right',
+        style: { placement: 'bottom-right' },
       },
       {
         id: 'loop-7',
         source: 'node2',
         target: 'node2',
-        placement: 'bottom-left',
+        style: { placement: 'bottom-left' },
       },
       {
         id: 'loop-8',
         source: 'node2',
         target: 'node2',
-        placement: 'top-left',
+        style: { placement: 'top-left' },
       },
       {
         id: 'loop-9',
@@ -82,7 +83,7 @@ export const edgeLoopCurve: StaticTestCase = async (context) => {
         type: 'rect',
         size: [80, 30],
         labelBackground: true,
-        port: (d: any) => d.id.includes('ports'),
+        port: (d) => idOf(d).toString().includes('ports'),
         portR: 3,
         ports: [
           {
@@ -100,7 +101,7 @@ export const edgeLoopCurve: StaticTestCase = async (context) => {
       style: {
         type: 'line',
         endArrow: true,
-        loopPlacement: (d: any) => d.placement,
+        loopPlacement: (d) => d.style!.placement,
       },
     },
     layout: {
diff --git a/packages/g6/__tests__/demo/static/edge-loop-polyline.ts b/packages/g6/__tests__/demo/static/edge-loop-polyline.ts
index 976ae777a36..1bef42b8260 100644
--- a/packages/g6/__tests__/demo/static/edge-loop-polyline.ts
+++ b/packages/g6/__tests__/demo/static/edge-loop-polyline.ts
@@ -1,4 +1,5 @@
 import { Graph } from '@/src';
+import { idOf } from '@/src/utils/id';
 import type { StaticTestCase } from '../types';
 
 export const edgeLoopPolyline: StaticTestCase = async (context) => {
@@ -9,49 +10,49 @@ export const edgeLoopPolyline: StaticTestCase = async (context) => {
         id: 'loop-1',
         source: 'node1',
         target: 'node1',
-        placement: 'top',
+        style: { placement: 'top' },
       },
       {
         id: 'loop-2',
         source: 'node1',
         target: 'node1',
-        placement: 'right',
+        style: { placement: 'right' },
       },
       {
         id: 'loop-3',
         source: 'node1',
         target: 'node1',
-        placement: 'bottom',
+        style: { placement: 'bottom' },
       },
       {
         id: 'loop-4',
         source: 'node1',
         target: 'node1',
-        placement: 'left',
+        style: { placement: 'left' },
       },
       {
         id: 'loop-5',
         source: 'node2',
         target: 'node2',
-        placement: 'top-right',
+        style: { placement: 'top-right' },
       },
       {
         id: 'loop-6',
         source: 'node2',
         target: 'node2',
-        placement: 'bottom-right',
+        style: { placement: 'bottom-right' },
       },
       {
         id: 'loop-7',
         source: 'node2',
         target: 'node2',
-        placement: 'bottom-left',
+        style: { placement: 'bottom-left' },
       },
       {
         id: 'loop-8',
         source: 'node2',
         target: 'node2',
-        placement: 'top-left',
+        style: { placement: 'top-left' },
       },
       {
         id: 'loop-9',
@@ -81,7 +82,7 @@ export const edgeLoopPolyline: StaticTestCase = async (context) => {
       style: {
         type: 'rect',
         size: [80, 30],
-        port: (d: any) => d.id.includes('ports'),
+        port: (d) => idOf(d).toString().includes('ports'),
         portR: 3,
         ports: [
           {
@@ -99,7 +100,7 @@ export const edgeLoopPolyline: StaticTestCase = async (context) => {
       style: {
         type: 'polyline',
         endArrow: true,
-        loopPlacement: (d: any) => d.placement,
+        loopPlacement: (d) => d.style!.placement,
       },
     },
     layout: {
diff --git a/packages/g6/__tests__/demo/static/edge-quadratic.ts b/packages/g6/__tests__/demo/static/edge-quadratic.ts
index 8621f3c9ded..d79c469ca36 100644
--- a/packages/g6/__tests__/demo/static/edge-quadratic.ts
+++ b/packages/g6/__tests__/demo/static/edge-quadratic.ts
@@ -42,7 +42,7 @@ export const edgeQuadratic: StaticTestCase = async (context) => {
     edge: {
       style: {
         type: 'quadratic', // 👈🏻 Edge shape type.
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id!,
         labelBackground: true,
         endArrow: true,
       },
diff --git a/packages/g6/__tests__/demo/static/element-label-background.ts b/packages/g6/__tests__/demo/static/element-label-background.ts
index 9522908847f..0686e1cee8d 100644
--- a/packages/g6/__tests__/demo/static/element-label-background.ts
+++ b/packages/g6/__tests__/demo/static/element-label-background.ts
@@ -43,7 +43,7 @@ export const elementLabelBackground: StaticTestCase = async (context) => {
     data,
     node: {
       style: {
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id,
         labelPlacement: 'bottom',
         labelFill: '#e66465',
         labelFontSize: 12,
@@ -56,7 +56,7 @@ export const elementLabelBackground: StaticTestCase = async (context) => {
     },
     edge: {
       style: {
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id!,
         labelPlacement: 'center',
         labelTextBaseline: 'top',
         labelDy: 5,
diff --git a/packages/g6/__tests__/demo/static/element-label-oversized.ts b/packages/g6/__tests__/demo/static/element-label-oversized.ts
index 9d5b7db1f9b..beb4f37eca3 100644
--- a/packages/g6/__tests__/demo/static/element-label-oversized.ts
+++ b/packages/g6/__tests__/demo/static/element-label-oversized.ts
@@ -3,6 +3,7 @@ import type { StaticTestCase } from '../types';
 
 export const elementLabelOversized: StaticTestCase = async (context) => {
   const { container, animation, theme } = context;
+
   const data = {
     nodes: [
       {
@@ -43,11 +44,11 @@ export const elementLabelOversized: StaticTestCase = async (context) => {
     node: {
       style: {
         type: 'rect',
-        x: (d: any) => d.data.x,
-        y: (d: any) => d.data.y,
-        size: (d: any) => d.data.size,
+        x: (d) => d.data!.x as number,
+        y: (d) => d.data!.y as number,
+        size: (d) => d.data!.size as number,
         labelPlacement: 'bottom',
-        labelText: (d: any) => d.data.label,
+        labelText: (d) => d.data!.label as string,
         labelMaxWidth: '90%',
         labelBackground: true,
         labelBackgroundFill: '#eee',
@@ -61,7 +62,7 @@ export const elementLabelOversized: StaticTestCase = async (context) => {
       style: {
         labelOffsetY: -4,
         labelTextBaseline: 'bottom',
-        labelText: (d: any) => d.data.label,
+        labelText: (d) => d.data!.label as string,
         labelMaxWidth: '80%',
         labelBackground: true,
         labelBackgroundFill: 'red',
diff --git a/packages/g6/__tests__/demo/static/graph-element.ts b/packages/g6/__tests__/demo/static/graph-element.ts
index b73070711b2..746451e1d13 100644
--- a/packages/g6/__tests__/demo/static/graph-element.ts
+++ b/packages/g6/__tests__/demo/static/graph-element.ts
@@ -1,5 +1,6 @@
 import type { G6Spec } from '@/src';
 import { Graph } from '@/src';
+import { idOf } from '../../../src/utils/id';
 import type { STDTestCase } from '../types';
 
 export const graphElement: STDTestCase = async (context) => {
@@ -25,12 +26,12 @@ export const graphElement: STDTestCase = async (context) => {
     },
     node: {
       style: {
-        fill: (datum: any) => (datum?.data?.value > 100 ? 'red' : 'blue'),
-        border: (datum: any, index: number, data: any) => (index % 2 === 0 ? 0 : 10),
+        fill: (datum) => ((datum?.data?.value as number) > 100 ? 'red' : 'blue'),
+        border: (datum: any, index: number) => (index % 2 === 0 ? 0 : 10),
       },
       state: {
         selected: {
-          fill: (datum: any) => (datum?.data?.value > 100 ? 'purple' : 'cyan'),
+          fill: (datum) => ((datum?.data?.value as number) > 100 ? 'purple' : 'cyan'),
         },
       },
       palette: 'spectral',
@@ -46,7 +47,7 @@ export const graphElement: STDTestCase = async (context) => {
           lineWidth: 4,
         },
       },
-      palette: { type: 'group', color: 'oranges', field: (d: any) => d.id, invert: true },
+      palette: { type: 'group', color: 'oranges', field: (d) => idOf(d).toString(), invert: true },
     },
     combo: {
       style: {},
diff --git a/packages/g6/__tests__/demo/static/node-circle.ts b/packages/g6/__tests__/demo/static/node-circle.ts
index b47cd1a11bf..38a09e83cf9 100644
--- a/packages/g6/__tests__/demo/static/node-circle.ts
+++ b/packages/g6/__tests__/demo/static/node-circle.ts
@@ -1,4 +1,5 @@
 import { Graph } from '@/src';
+import { idOf } from '@/src/utils/id';
 import type { StaticTestCase } from '../types';
 
 export const nodeCircle: StaticTestCase = async (context) => {
@@ -26,18 +27,18 @@ export const nodeCircle: StaticTestCase = async (context) => {
       style: {
         type: 'circle', // 👈🏻 Node shape type.
         size: 40,
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id!,
         iconHeight: 20,
         iconWidth: 20,
         iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-        halo: (d: any) => d.id.includes('halo'),
+        halo: (d) => idOf(d).toString().includes('halo'),
         portR: 3,
-        ports: (d: any) =>
-          d.id.includes('ports')
+        ports: (d) =>
+          idOf(d).toString().includes('ports')
             ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]
             : [],
-        badges: (d: any) =>
-          d.id.includes('badges')
+        badges: (d) =>
+          idOf(d).toString().includes('badges')
             ? [
                 { text: 'A', placement: 'right-top' },
                 { text: 'Important', placement: 'right' },
diff --git a/packages/g6/__tests__/demo/static/node-diamond.ts b/packages/g6/__tests__/demo/static/node-diamond.ts
index 045f639e244..87ae71c3cc2 100644
--- a/packages/g6/__tests__/demo/static/node-diamond.ts
+++ b/packages/g6/__tests__/demo/static/node-diamond.ts
@@ -1,4 +1,5 @@
 import { Graph } from '@/src';
+import { idOf } from '@/src/utils/id';
 import type { StaticTestCase } from '../types';
 
 export const nodeDiamond: StaticTestCase = async (context) => {
@@ -25,18 +26,18 @@ export const nodeDiamond: StaticTestCase = async (context) => {
       style: {
         type: 'diamond', // 👈🏻 Node shape type.
         size: 40,
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id!,
         iconWidth: 20,
         iconHeight: 20,
         iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-        halo: (d: any) => d.id.includes('halo'),
+        halo: (d) => idOf(d).toString().includes('halo'),
         portR: 3,
-        ports: (d: any) =>
-          d.id.includes('ports')
+        ports: (d) =>
+          idOf(d).toString().includes('ports')
             ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]
             : [],
-        badges: (d: any) =>
-          d.id.includes('badges')
+        badges: (d) =>
+          idOf(d).toString().includes('badges')
             ? [
                 { text: 'A', placement: 'right-top' },
                 { text: 'Important', placement: 'right' },
diff --git a/packages/g6/__tests__/demo/static/node-ellipse.ts b/packages/g6/__tests__/demo/static/node-ellipse.ts
index 68e13a47f61..da5471a4edf 100644
--- a/packages/g6/__tests__/demo/static/node-ellipse.ts
+++ b/packages/g6/__tests__/demo/static/node-ellipse.ts
@@ -1,4 +1,5 @@
 import { Graph } from '@/src';
+import { idOf } from '@/src/utils/id';
 import type { StaticTestCase } from '../types';
 
 export const nodeEllipse: StaticTestCase = async (context) => {
@@ -26,18 +27,18 @@ export const nodeEllipse: StaticTestCase = async (context) => {
       style: {
         type: 'ellipse', // 👈🏻 Node shape type.
         size: [45, 35],
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id!,
         iconHeight: 20,
         iconWidth: 20,
         iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-        halo: (d: any) => d.id.includes('halo'),
+        halo: (d) => idOf(d).toString().includes('halo'),
         portR: 3,
-        ports: (d: any) =>
-          d.id.includes('ports')
+        ports: (d) =>
+          idOf(d).toString().includes('ports')
             ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]
             : [],
-        badges: (d: any) =>
-          d.id.includes('badges')
+        badges: (d) =>
+          idOf(d).toString().includes('badges')
             ? [
                 { text: 'A', placement: 'right-top' },
                 { text: 'Important', placement: 'right' },
diff --git a/packages/g6/__tests__/demo/static/node-image.ts b/packages/g6/__tests__/demo/static/node-image.ts
index ec83064de20..a01275e7f04 100644
--- a/packages/g6/__tests__/demo/static/node-image.ts
+++ b/packages/g6/__tests__/demo/static/node-image.ts
@@ -1,4 +1,5 @@
 import { Graph } from '@/src';
+import { idOf } from '@/src/utils/id';
 import type { StaticTestCase } from '../types';
 
 export const nodeImage: StaticTestCase = async (context) => {
@@ -26,17 +27,17 @@ export const nodeImage: StaticTestCase = async (context) => {
       style: {
         type: 'image', // 👈🏻 Node shape type.
         size: 40,
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id!,
         src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
-        halo: (d: any) => d.id.includes('halo'),
+        halo: (d) => idOf(d).toString().includes('halo'),
         haloStroke: '#227eff',
         portR: 3,
-        ports: (d: any) =>
-          d.id.includes('ports')
+        ports: (d) =>
+          idOf(d).toString().includes('ports')
             ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]
             : [],
-        badges: (d: any) =>
-          d.id.includes('badges')
+        badges: (d) =>
+          idOf(d).toString().includes('badges')
             ? [
                 { text: 'A', placement: 'right-top' },
                 { text: 'Important', placement: 'right' },
diff --git a/packages/g6/__tests__/demo/static/node-rect.ts b/packages/g6/__tests__/demo/static/node-rect.ts
index a646eca7895..aaf5b3a499c 100644
--- a/packages/g6/__tests__/demo/static/node-rect.ts
+++ b/packages/g6/__tests__/demo/static/node-rect.ts
@@ -1,4 +1,5 @@
 import { Graph } from '@/src';
+import { idOf } from '@/src/utils/id';
 import type { StaticTestCase } from '../types';
 
 export const nodeRect: StaticTestCase = async (context) => {
@@ -27,18 +28,18 @@ export const nodeRect: StaticTestCase = async (context) => {
         type: 'rect', // 👈🏻 Node shape type.
         radius: 4, // 👈🏻 Set the radius.
         size: 40,
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id!,
         iconWidth: 20,
         iconHeight: 20,
         iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-        halo: (d: any) => d.id.includes('halo'),
+        halo: (d) => idOf(d).toString().includes('halo'),
         portR: 3,
-        ports: (d: any) =>
-          d.id.includes('ports')
+        ports: (d) =>
+          idOf(d).toString().includes('ports')
             ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]
             : [],
-        badges: (d: any) =>
-          d.id.includes('badges')
+        badges: (d) =>
+          idOf(d).toString().includes('badges')
             ? [
                 { text: 'A', placement: 'right-top' },
                 { text: 'Important', placement: 'right' },
diff --git a/packages/g6/__tests__/demo/static/node-star.ts b/packages/g6/__tests__/demo/static/node-star.ts
index 052afe83620..2377b279d9f 100644
--- a/packages/g6/__tests__/demo/static/node-star.ts
+++ b/packages/g6/__tests__/demo/static/node-star.ts
@@ -1,4 +1,5 @@
 import { Graph } from '@/src';
+import { idOf } from '@/src/utils/id';
 import type { StaticTestCase } from '../types';
 
 export const nodeStar: StaticTestCase = async (context) => {
@@ -26,16 +27,16 @@ export const nodeStar: StaticTestCase = async (context) => {
       style: {
         type: 'star', // 👈🏻 Node shape type.
         size: 40,
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id!,
         iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-        halo: (d: any) => d.id.includes('halo'),
+        halo: (d) => idOf(d).toString().includes('halo'),
         portR: 3,
-        ports: (d: any) =>
-          d.id.includes('ports')
+        ports: (d) =>
+          idOf(d).toString().includes('ports')
             ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]
             : [],
-        badges: (d: any) =>
-          d.id.includes('badges')
+        badges: (d) =>
+          idOf(d).toString().includes('badges')
             ? [
                 { text: 'A', placement: 'right-top' },
                 { text: 'Important', placement: 'right' },
diff --git a/packages/g6/__tests__/demo/static/node-triangle.ts b/packages/g6/__tests__/demo/static/node-triangle.ts
index affdfd13def..378e709b5f4 100644
--- a/packages/g6/__tests__/demo/static/node-triangle.ts
+++ b/packages/g6/__tests__/demo/static/node-triangle.ts
@@ -1,4 +1,5 @@
 import { Graph } from '@/src';
+import { idOf } from '@/src/utils/id';
 import type { StaticTestCase } from '../types';
 
 export const nodeTriangle: StaticTestCase = async (context) => {
@@ -26,14 +27,16 @@ export const nodeTriangle: StaticTestCase = async (context) => {
         type: 'triangle', // 👈🏻 Node shape type.
         size: 40,
         direction: (d: any) => d.data?.direction,
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id!,
         iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-        halo: (d: any) => d.id.includes('halo'),
+        halo: (d) => idOf(d).toString().includes('halo'),
         portR: 3,
-        ports: (d: any) =>
-          d.id.includes('ports') ? [{ placement: 'left' }, { placement: 'top' }, { placement: 'bottom' }] : [],
-        badges: (d: any) =>
-          d.id.includes('badges')
+        ports: (d) =>
+          idOf(d).toString().includes('ports')
+            ? [{ placement: 'left' }, { placement: 'top' }, { placement: 'bottom' }]
+            : [],
+        badges: (d) =>
+          idOf(d).toString().includes('badges')
             ? [
                 { text: 'A', placement: 'right-top' },
                 { text: 'Important', placement: 'right' },
diff --git a/packages/g6/__tests__/unit/elements/combo.spec.ts b/packages/g6/__tests__/unit/elements/combo.spec.ts
index 2b9c224b166..ebbf3ac5daf 100644
--- a/packages/g6/__tests__/unit/elements/combo.spec.ts
+++ b/packages/g6/__tests__/unit/elements/combo.spec.ts
@@ -15,8 +15,7 @@ describe('combo', () => {
 
   it('collapse circle combo', async () => {
     const expandCombo = () => {
-      graph.updateComboData((data) => [
-        ...data,
+      graph.updateComboData([
         {
           id: 'combo-2',
           style: {
@@ -26,9 +25,8 @@ describe('combo', () => {
       ]);
       graph.render();
     };
-    const collapseCombo = (collapsedOrigin: string) => {
-      graph.updateComboData((data) => [
-        ...data,
+    const collapseCombo = (collapsedOrigin: any) => {
+      graph.updateComboData([
         {
           id: 'combo-2',
           style: {
@@ -70,8 +68,7 @@ describe('combo', () => {
 
   it('collapse rect combo', async () => {
     const expandCombo = () => {
-      graph.updateComboData((data) => [
-        ...data,
+      graph.updateComboData([
         {
           id: 'combo-1',
           style: {
@@ -82,9 +79,8 @@ describe('combo', () => {
       ]);
       graph.render();
     };
-    const collapseCombo = (collapsedOrigin: string) => {
-      graph.updateComboData((data) => [
-        ...data,
+    const collapseCombo = (collapsedOrigin: any) => {
+      graph.updateComboData([
         {
           id: 'combo-1',
           style: {
@@ -138,9 +134,8 @@ describe('combo', () => {
       ]);
       graph.render();
     };
-    const collapseCombo = (type: string | ((children: any) => string)) => {
-      graph.updateComboData((data) => [
-        ...data,
+    const collapseCombo = (type: any | ((children: any[]) => string)) => {
+      graph.updateComboData([
         {
           id: 'combo-2',
           style: {
@@ -162,7 +157,7 @@ describe('combo', () => {
     collapseCombo('node-count');
     await expect(graph).toMatchSnapshot(__filename, 'circle-marker-nodeCount');
     expandCombo();
-    collapseCombo((children: any) => children.length.toString() + 'nodes');
+    collapseCombo((children: any[]) => children.length.toString() + 'nodes');
     await expect(graph).toMatchSnapshot(__filename, 'circle-marker-custom');
   });
 });
diff --git a/packages/g6/__tests__/unit/runtime/element.spec.ts b/packages/g6/__tests__/unit/runtime/element.spec.ts
index 5c20ad7ab80..fb24dcd0acb 100644
--- a/packages/g6/__tests__/unit/runtime/element.spec.ts
+++ b/packages/g6/__tests__/unit/runtime/element.spec.ts
@@ -145,9 +145,9 @@ describe('ElementController', () => {
 
     const comboStyle = elementController.getElementComputedStyle('combo', 'combo-1');
 
-    expect(comboStyle.children[0].id).toEqual('node-3');
+    expect(comboStyle.childrenNode[0].id).toEqual('node-3');
 
-    expect(omit(comboStyle, ['children'])).toEqual({
+    expect(omit(comboStyle, ['childrenNode'])).toEqual({
       ...LIGHT_THEME.combo?.style,
       type: 'circle',
       color: BUILT_IN_PALETTES.blues[0],
diff --git a/packages/g6/__tests__/unit/utils/combo.spec.ts b/packages/g6/__tests__/unit/utils/combo.spec.ts
index 7eb41769fbf..1a020b9609c 100644
--- a/packages/g6/__tests__/unit/utils/combo.spec.ts
+++ b/packages/g6/__tests__/unit/utils/combo.spec.ts
@@ -40,7 +40,7 @@ describe('combo', () => {
   });
 
   it('getCollapsedMarkerText', () => {
-    const children = [new CircleCombo({ style: { children: [new Circle({})] } })];
+    const children = [new CircleCombo({ style: { childrenNode: [new Circle({})] } })];
     expect(getCollapsedMarkerText('child-count', children)).toEqual('1');
     expect(getCollapsedMarkerText('descendant-count', children)).toEqual('2');
     expect(getCollapsedMarkerText('node-count', children)).toEqual('1');
@@ -49,7 +49,7 @@ describe('combo', () => {
 
   it('getDescendantCount', () => {
     expect(getDescendantCount([new Circle({}), new Circle({})])).toEqual(2);
-    expect(getDescendantCount([new CircleCombo({ style: { children: [new Circle({})] } })])).toEqual(2);
-    expect(getDescendantCount([new CircleCombo({ style: { children: [new Circle({})] } })], true)).toEqual(1);
+    expect(getDescendantCount([new CircleCombo({ style: { childrenNode: [new Circle({})] } })])).toEqual(2);
+    expect(getDescendantCount([new CircleCombo({ style: { childrenNode: [new Circle({})] } })], true)).toEqual(1);
   });
 });
diff --git a/packages/g6/__tests__/unit/utils/data.spec.ts b/packages/g6/__tests__/unit/utils/data.spec.ts
index fa8b31d4db1..98a68ff4967 100644
--- a/packages/g6/__tests__/unit/utils/data.spec.ts
+++ b/packages/g6/__tests__/unit/utils/data.spec.ts
@@ -12,8 +12,8 @@ describe('data', () => {
       style: {
         fill: 'red',
         badges: [
-          { label: 'badge1', color: 'red' },
-          { label: 'badge2', color: 'blue' },
+          { text: 'badge1', stroke: 'red' },
+          { text: 'badge2', stroke: 'blue' },
         ],
       },
     };
@@ -26,8 +26,8 @@ describe('data', () => {
       },
       style: {
         badges: [
-          { label: 'badge2', color: 'blue' },
-          { label: 'badge3', color: 'green' },
+          { text: 'badge2', stroke: 'blue' },
+          { text: 'badge3', stroke: 'green' },
         ],
         stroke: 'pink',
       },
@@ -42,8 +42,8 @@ describe('data', () => {
       style: {
         fill: 'red',
         badges: [
-          { label: 'badge2', color: 'blue' },
-          { label: 'badge3', color: 'green' },
+          { text: 'badge2', stroke: 'blue' },
+          { text: 'badge3', stroke: 'green' },
         ],
         stroke: 'pink',
       },
diff --git a/packages/g6/__tests__/unit/utils/diff.spec.ts b/packages/g6/__tests__/unit/utils/diff.spec.ts
index e6433d5986d..d4e99d3eaf9 100644
--- a/packages/g6/__tests__/unit/utils/diff.spec.ts
+++ b/packages/g6/__tests__/unit/utils/diff.spec.ts
@@ -1,10 +1,11 @@
 import { arrayDiff } from '@/src/utils/diff';
 
 describe('diff', () => {
+  const key = (d: { id: string }) => d.id;
+
   it('array diff simple', () => {
     const original = [{ id: 'node-1' }, { id: 'node-2' }, { id: 'node-3' }];
     const modified = [{ id: 'node-1' }, { id: 'node-2' }, { id: 'node-4' }];
-    const key = (d: { id: string }) => d.id;
 
     const { enter, update, exit, keep } = arrayDiff(original, modified, key);
 
@@ -26,7 +27,6 @@ describe('diff', () => {
       { id: 'node-2', data: { value: 2 } },
       { id: 'node-4', data: { value: 3 }, style: { fill: 'red' } },
     ];
-    const key = (d: { id: string }) => d.id;
 
     const { enter, update, exit, keep } = arrayDiff(original, modified, key);
 
diff --git a/packages/g6/__tests__/unit/utils/graphlib.spec.ts b/packages/g6/__tests__/unit/utils/graphlib.spec.ts
index 20689f6b3c8..7bb9b4d8d19 100644
--- a/packages/g6/__tests__/unit/utils/graphlib.spec.ts
+++ b/packages/g6/__tests__/unit/utils/graphlib.spec.ts
@@ -1,3 +1,4 @@
+import type { NodeData } from '@/src';
 import { toG6Data, toGraphlibData } from '@/src/utils/graphlib';
 
 describe('graphlib', () => {
@@ -36,7 +37,7 @@ describe('graphlib', () => {
   });
 
   it('data isolation', () => {
-    const raw = {
+    const raw: NodeData = {
       id: 'node-3',
       data: { basic: 2, array: [1, 2, 3], object: { a: 1 } },
       style: { x: 100, y: 100, opacity: 0.5, size: [100, 100] },
diff --git a/packages/g6/__tests__/unit/utils/palette.spec.ts b/packages/g6/__tests__/unit/utils/palette.spec.ts
index 39e9f89ba0d..8f2bb1634ee 100644
--- a/packages/g6/__tests__/unit/utils/palette.spec.ts
+++ b/packages/g6/__tests__/unit/utils/palette.spec.ts
@@ -1,4 +1,5 @@
 import { register } from '@/src/registry';
+import { idOf } from '@/src/utils/id';
 import { assignColorByPalette, getPaletteColors, parsePalette } from '@/src/utils/palette';
 
 describe('palette', () => {
@@ -91,7 +92,7 @@ describe('palette', () => {
     expect(
       assignColorByPalette(data5, {
         type: 'group',
-        field: (d: any) => d.id,
+        field: (d) => idOf(d).toString(),
         color: 'category3',
       }),
     ).toEqual({
@@ -105,7 +106,7 @@ describe('palette', () => {
     expect(
       assignColorByPalette(data5, {
         type: 'group',
-        field: (d: any) => d.id,
+        field: (d) => idOf(d).toString(),
         color: 'spectral',
       }),
     ).toEqual({
diff --git a/packages/g6/src/elements/combos/base-combo.ts b/packages/g6/src/elements/combos/base-combo.ts
index 50c03b88438..5b61e005b44 100644
--- a/packages/g6/src/elements/combos/base-combo.ts
+++ b/packages/g6/src/elements/combos/base-combo.ts
@@ -37,7 +37,7 @@ export abstract class BaseCombo<S extends BaseComboStyleProps = BaseComboStylePr
   static defaultStyleProps: BaseComboStyleProps = {
     size: 0,
     padding: 0,
-    children: [],
+    childrenNode: [],
     droppable: true,
     draggable: true,
     collapsed: false,
@@ -97,7 +97,7 @@ export abstract class BaseCombo<S extends BaseComboStyleProps = BaseComboStylePr
   }
 
   protected getContentBBox(attributes: Required<S>): AABB {
-    const { children = [], padding } = attributes;
+    const { childrenNode: children = [], padding } = attributes;
     const childrenBBox = getCombinedBBox(children.map((child) => child.getBounds()));
 
     if (!padding) return childrenBBox;
@@ -120,7 +120,7 @@ export abstract class BaseCombo<S extends BaseComboStyleProps = BaseComboStylePr
     const [x, y] = getXYByPlacement(keyShape.getLocalBounds(), 'center');
 
     if (type) {
-      const text = getCollapsedMarkerText(type, attributes.children!);
+      const text = getCollapsedMarkerText(type, attributes.childrenNode || []);
       return { ...collapsedMarkerStyle, x, y, text };
     }
 
diff --git a/packages/g6/src/runtime/data.ts b/packages/g6/src/runtime/data.ts
index fde91973020..1a2089ee981 100644
--- a/packages/g6/src/runtime/data.ts
+++ b/packages/g6/src/runtime/data.ts
@@ -9,7 +9,6 @@ import type {
   DataRemoved,
   DataUpdated,
   ElementDatum,
-  GraphlibModel,
   NodeLikeData,
   PartialEdgeData,
   PartialGraphData,
@@ -26,7 +25,7 @@ import { idOf, parentIdOf } from '../utils/id';
 import { dfs } from '../utils/traverse';
 
 export class DataController {
-  public model: GraphlibModel;
+  public model: GraphLib<NodeLikeData, EdgeData>;
 
   /**
    * <zh/> 最近一次删除的 combo 的 id
@@ -132,28 +131,30 @@ export class DataController {
 
   public getNodeData(ids?: ID[]) {
     return this.model.getAllNodes().reduce((acc, node) => {
-      if (this.isCombo(idOf(node))) return acc;
+      const data = node.data;
+      if (this.isCombo(idOf(data))) return acc;
 
       if (ids === undefined) acc.push(toG6Data(node));
-      else ids.includes(idOf(node)) && acc.push(node.data);
+      else ids.includes(idOf(data)) && acc.push(data);
       return acc;
     }, [] as NodeData[]);
   }
 
   public getEdgeData(ids?: ID[]) {
     return this.model.getAllEdges().reduce((acc, edge) => {
-      if (ids === undefined) acc.push(edge.data);
-      else ids.includes(idOf(edge)) && acc.push(edge.data);
+      const data = edge.data;
+      if (ids === undefined) acc.push(data);
+      else ids.includes(idOf(data)) && acc.push(data);
       return acc;
     }, [] as EdgeData[]);
   }
 
   public getComboData(ids?: ID[]) {
     return this.model.getAllNodes().reduce((acc, node) => {
-      if (!this.isCombo(idOf(node))) return acc;
+      if (!this.isCombo(idOf(node.data))) return acc;
 
       if (ids === undefined) acc.push(node.data);
-      else ids.includes(idOf(node)) && acc.push(node.data);
+      else ids.includes(idOf(node.data)) && acc.push(node.data);
       return acc;
     }, [] as ComboData[]);
   }
@@ -219,8 +220,9 @@ export class DataController {
    */
   public getNodeLikeData(ids?: ID[]) {
     return this.model.getAllNodes().reduce((acc, node) => {
-      if (ids) ids.includes(idOf(node)) && acc.push(node.data);
-      else acc.push(node.data);
+      const data = node.data;
+      if (ids) ids.includes(idOf(data)) && acc.push(data);
+      else acc.push(data);
       return acc;
     }, [] as NodeLikeData[]);
   }
@@ -426,7 +428,7 @@ export class DataController {
         // If the position of the combo has changed, the position of its child nodes needs to be updated
         if (Object.keys(modifiedCombo.style || {}).some((key) => ['x', 'y', 'z'].includes(key))) {
           const { x = 0, y = 0, z = 0 } = modifiedCombo.style || {};
-          this.translateComboTo([modifiedComboId], [x, y, z]);
+          this.translateComboTo([modifiedComboId], [+x, +y, +z]);
         }
 
         const value = mergeElementsData(originalCombo, modifiedCombo);
@@ -451,7 +453,7 @@ export class DataController {
             const succeedID = idOf(succeed);
             const { x = 0, y = 0, z = 0 } = succeed.style || {};
             const value = mergeElementsData(succeed, {
-              style: { x: x + dx, y: y + dy, z: z + dz },
+              style: { x: +x + dx, y: +y + dy, z: z + dz },
             });
             this.pushChange({
               value,
@@ -475,9 +477,9 @@ export class DataController {
     model.batch(() => {
       this.getComboData(ids).forEach((combo) => {
         const { x: comboX = 0, y: comboY = 0, z: comboZ = 0 } = combo.style || {};
-        const dx = x - comboX;
-        const dy = y - comboY;
-        const dz = z - comboZ;
+        const dx = x - +comboX;
+        const dy = y - +comboY;
+        const dz = z - +comboZ;
 
         dfs(
           combo,
@@ -485,7 +487,7 @@ export class DataController {
             const succeedID = idOf(succeed);
             const { x = 0, y = 0, z = 0 } = succeed.style || {};
             const value = mergeElementsData(succeed, {
-              style: { x: x + dx, y: y + dy, z: z + dz },
+              style: { x: +x + dx, y: +y + dy, z: +z + dz },
             });
             this.pushChange({
               value,
diff --git a/packages/g6/src/runtime/element.ts b/packages/g6/src/runtime/element.ts
index 0703573aad3..dabe24ff986 100644
--- a/packages/g6/src/runtime/element.ts
+++ b/packages/g6/src/runtime/element.ts
@@ -12,8 +12,9 @@ import type { BaseShape } from '../elements/shapes';
 import { getExtension } from '../registry';
 import type { ComboData, EdgeData, NodeData } from '../spec';
 import type { AnimationStage } from '../spec/element/animation';
+import { ComboStyle } from '../spec/element/combo';
 import type { EdgeStyle } from '../spec/element/edge';
-import type { NodeLikeStyle } from '../spec/element/node';
+import type { NodeStyle } from '../spec/element/node';
 import type {
   AnimatableTask,
   Combo,
@@ -121,7 +122,7 @@ export class ElementController {
     return { color };
   }
 
-  public getDataStyle(id: ID): NodeLikeStyle | EdgeStyle {
+  public getDataStyle(id: ID): NodeStyle | EdgeStyle | ComboStyle {
     const datum = this.context.model.getElementsData([id])?.[0];
     return datum?.style || {};
   }
@@ -136,7 +137,7 @@ export class ElementController {
   private computedElementDefaultStyle(elementType: ElementType, context: StyleIterationContext) {
     const { options } = this.context;
     const defaultStyle = options[elementType]?.style || {};
-    this.defaultStyle[idOf(context.datum)] = computeElementCallbackStyle(defaultStyle, context);
+    this.defaultStyle[idOf(context.datum)] = computeElementCallbackStyle(defaultStyle as any, context);
   }
 
   private computeElementsDefaultStyle(ids?: ID[]) {
@@ -172,7 +173,7 @@ export class ElementController {
   private getElementStateStyle(elementType: ElementType, state: State, context: StyleIterationContext) {
     const { options } = this.context;
     const stateStyle = options[elementType]?.state?.[state] || {};
-    return computeElementCallbackStyle(stateStyle, context);
+    return computeElementCallbackStyle(stateStyle as any, context);
   }
 
   /**
@@ -323,7 +324,7 @@ export class ElementController {
       Object.assign(style, this.getEdgeEndsContext(id));
     } else if (elementType === 'combo') {
       Object.assign(style, {
-        children: this.getComboChildren(id),
+        childrenNode: this.getComboChildren(id),
       });
     }
 
diff --git a/packages/g6/src/runtime/layout.ts b/packages/g6/src/runtime/layout.ts
index 5699bdde46a..96120db97fb 100644
--- a/packages/g6/src/runtime/layout.ts
+++ b/packages/g6/src/runtime/layout.ts
@@ -131,6 +131,7 @@ export class LayoutController {
     if (isLayoutWithIterations(layout)) {
       // 有动画，基于布局迭代 tick 更新位置 / Update position based on layout iteration tick
       if (animation) {
+        // @ts-expect-error size is incompatible, but it's okay
         return await layout.execute(model, {
           onTick: (tickData: LayoutMapping) => {
             this.updateElementPosition(tickData, false);
@@ -139,12 +140,14 @@ export class LayoutController {
       }
 
       // 无动画，直接返回终态位置 / No animation, return final position directly
+      // @ts-expect-error size is incompatible, but it's okay
       layout.execute(model);
       layout.stop();
       return layout.tick(iterations);
     }
 
     // 无迭代的布局，直接返回终态位置 / Layout without iteration, return final position directly
+    // @ts-expect-error size is incompatible, but it's okay
     const layoutResult = await layout.execute(model);
     if (animation) {
       this.updateElementPosition(layoutResult, animation);
@@ -227,7 +230,7 @@ export class LayoutController {
     const comboElementMap = Object.fromEntries(element.getCombos().map((combo) => [combo.id, combo]));
     const edgeElementMap = Object.fromEntries(element.getEdges().map((edge) => [edge.id, edge]));
 
-    const nodes = model.model.getAllNodes().filter((node) => nodesFilter(node));
+    const nodes = model.model.getAllNodes().filter((node) => nodesFilter(node.data));
     const edges = model.model.getAllEdges();
 
     const nodesToLayout = (
@@ -329,6 +332,7 @@ export class LayoutController {
           const { id } = node;
           // 此处 node 是经过 converter 转化的 / Here node is converted
           const { getMass } = options as ForceLayoutOptions;
+          // @ts-expect-error size is incompatible, but it's okay
           if (getMass) return getMass(node);
           const { mass } = node.data;
           if (isNumber(mass)) return mass;
diff --git a/packages/g6/src/spec/canvas.ts b/packages/g6/src/spec/canvas.ts
index 321bf491b0c..4ce12467409 100644
--- a/packages/g6/src/spec/canvas.ts
+++ b/packages/g6/src/spec/canvas.ts
@@ -8,7 +8,7 @@ import type { CanvasLayer } from '../types/canvas';
  * <en/> Canvas spec
  * @public
  */
-export type CanvasOptions = Pick<CanvasConfig, 'devicePixelRatio'> & {
+export interface CanvasOptions extends Pick<CanvasConfig, 'devicePixelRatio'> {
   container?: string | HTMLElement | Canvas;
   /**
    * <zh/> 画布宽度
@@ -40,4 +40,4 @@ export type CanvasOptions = Pick<CanvasConfig, 'devicePixelRatio'> & {
    * <en/> canvas background color
    */
   background?: string;
-};
+}
diff --git a/packages/g6/src/spec/data.ts b/packages/g6/src/spec/data.ts
index 3d3cd30eb9e..1e8eefc82b4 100644
--- a/packages/g6/src/spec/data.ts
+++ b/packages/g6/src/spec/data.ts
@@ -1,8 +1,9 @@
 import type { ID } from '@antv/graphlib';
+import type { ComboStyle } from './element/combo';
 import type { EdgeStyle } from './element/edge';
-import type { NodeLikeStyle } from './element/node';
+import type { NodeStyle } from './element/node';
 
-export type GraphData = {
+export interface GraphData {
   /**
    * <zh/> 节点数据
    *
@@ -21,57 +22,27 @@ export type GraphData = {
    * <en/> combo data
    */
   combos?: ComboData[];
-};
+}
 
-export type NodeData = {
+export interface NodeData {
   id: ID;
   data?: Record<string, unknown>;
-  style?: NodeLikeDataStyle;
-};
+  style?: NodeStyle;
+  [key: string]: unknown;
+}
 
-export type ComboData = {
+export interface ComboData {
   id: ID;
   data?: Record<string, unknown>;
-  style?: NodeLikeDataStyle;
-};
+  style?: ComboStyle;
+  [key: string]: unknown;
+}
 
-export type EdgeData = {
+export interface EdgeData {
   id?: ID;
   source: ID;
   target: ID;
   data?: Record<string, unknown>;
-  style?: EdgeDataStyle;
-};
-
-interface NodeLikeDataStyle extends BaseElementStyle, NodeLikeStyle {
-  /** <zh/> 节点 / combo 是否展开 | <en/> Whether the node / combo is expanded */
-  collapsed?: boolean;
-  /** <zh/> 父节点 id | <en/> Parent node id */
-  parentId?: ID;
-  /** <zh/> 子节点 id | <en/> Child node id */
-  children?: ID[];
-}
-
-interface EdgeDataStyle extends BaseElementStyle, EdgeStyle {
-  /**
-   * <zh/> 起点连接桩 id
-   *
-   * <en/> source port id
-   */
-  sourcePort?: string;
-  /**
-   * <zh/> 终点连接桩 id
-   *
-   * <en/> target port id
-   */
-  targetPort?: string;
-}
-
-interface BaseElementStyle {
-  /**
-   * <zh/> 默认状态
-   *
-   * <en/> Default state
-   */
-  states?: string[];
+  style?: EdgeStyle;
+  [key: string]: unknown;
 }
diff --git a/packages/g6/src/spec/element/base.ts b/packages/g6/src/spec/element/base.ts
new file mode 100644
index 00000000000..8cf061ed459
--- /dev/null
+++ b/packages/g6/src/spec/element/base.ts
@@ -0,0 +1,6 @@
+export interface BaseElementStyle {
+  /** <zh/> 元素类型 | <en/> Element type */
+  type?: string;
+  /** <zh/> 初始状态 | <en/> Initial state */
+  states?: string[];
+}
diff --git a/packages/g6/src/spec/element/combo.ts b/packages/g6/src/spec/element/combo.ts
index 7eeb0c01a10..6bc3c8fe5fa 100644
--- a/packages/g6/src/spec/element/combo.ts
+++ b/packages/g6/src/spec/element/combo.ts
@@ -1,7 +1,9 @@
+import type { ID } from '@antv/graphlib';
+import type { BaseComboStyleProps } from '../../elements/combos';
 import type { CallableObject } from '../../types/callable';
 import type { NodeData } from '../data';
 import type { AnimationOptions } from './animation';
-import type { NodeLikeStyle } from './node';
+import type { BaseElementStyle } from './base';
 import type { PaletteOptions } from './palette';
 
 /**
@@ -9,19 +11,19 @@ import type { PaletteOptions } from './palette';
  *
  * <en/> Combo spec
  */
-export type ComboOptions = {
+export interface ComboOptions {
   /**
    * <zh/> Combo 样式
    *
    * <en/> Combo style
    */
-  style?: CallableObject<NodeLikeStyle, NodeData>;
+  style?: CallableObject<ComboStyle, NodeData>;
   /**
    * <zh/> Combo 状态样式
    *
    * <en/> Combo state style
    */
-  state?: Record<string, CallableObject<NodeLikeStyle, NodeData>>;
+  state?: Record<string, CallableObject<ComboStyle, NodeData>>;
   /**
    * <zh/> Combo 动画
    *
@@ -34,11 +36,16 @@ export type ComboOptions = {
    * <en/> Palette
    */
   palette?: PaletteOptions;
-};
+}
 
-export type StaticComboOptions = {
-  style?: NodeLikeStyle;
-  state?: Record<string, NodeLikeStyle>;
+export interface StaticComboOptions {
+  style?: ComboStyle;
+  state?: Record<string, ComboStyle>;
   animation?: AnimationOptions;
   palette?: PaletteOptions;
-};
+}
+
+export interface ComboStyle extends BaseElementStyle, Partial<BaseComboStyleProps> {
+  children?: ID[];
+  [key: string]: any;
+}
diff --git a/packages/g6/src/spec/element/edge.ts b/packages/g6/src/spec/element/edge.ts
index 82fb0f43b01..d049f24c446 100644
--- a/packages/g6/src/spec/element/edge.ts
+++ b/packages/g6/src/spec/element/edge.ts
@@ -1,7 +1,8 @@
-import type { BaseStyleProps } from '@antv/g';
+import type { BaseEdgeStyleProps } from '../../elements/edges';
 import type { CallableObject } from '../../types/callable';
 import type { EdgeData } from '../data';
 import type { AnimationOptions } from './animation';
+import type { BaseElementStyle } from './base';
 import type { PaletteOptions } from './palette';
 
 /**
@@ -9,7 +10,7 @@ import type { PaletteOptions } from './palette';
  *
  * <en/> Edge spec
  */
-export type EdgeOptions = {
+export interface EdgeOptions {
   /**
    * <zh/> 边样式
    *
@@ -34,21 +35,15 @@ export type EdgeOptions = {
    * <en/> Palette
    */
   palette?: PaletteOptions;
-};
+}
 
-export type StaticEdgeOptions = {
+export interface StaticEdgeOptions {
   style?: EdgeStyle;
   state?: Record<string, EdgeStyle>;
   animation?: AnimationOptions;
   palette?: PaletteOptions;
-};
+}
 
-/**
- * <zh/> 边样式
- *
- * <en/> Edge style
- */
-export type EdgeStyle = Pick<BaseStyleProps, 'cursor' | 'opacity' | 'pointerEvents' | 'visibility' | 'zIndex'> & {
-  states?: string[];
-  type?: string;
-} & Record<string, unknown>;
+export interface EdgeStyle extends BaseElementStyle, Partial<BaseEdgeStyleProps> {
+  [key: string]: any;
+}
diff --git a/packages/g6/src/spec/element/node.ts b/packages/g6/src/spec/element/node.ts
index 3626a7bc335..98a4debf78a 100644
--- a/packages/g6/src/spec/element/node.ts
+++ b/packages/g6/src/spec/element/node.ts
@@ -1,7 +1,9 @@
-import type { BaseStyleProps } from '@antv/g';
+import type { ID } from '@antv/graphlib';
+import type { BaseNodeStyleProps } from '../../elements/nodes';
 import type { CallableObject } from '../../types/callable';
 import type { NodeData } from '../data';
 import type { AnimationOptions } from './animation';
+import type { BaseElementStyle } from './base';
 import type { PaletteOptions } from './palette';
 
 /**
@@ -9,19 +11,19 @@ import type { PaletteOptions } from './palette';
  *
  * <en/> Node spec
  */
-export type NodeOptions = {
+export interface NodeOptions {
   /**
    * <zh/> 节点样式
    *
    * <en/> Node style
    */
-  style?: CallableObject<NodeLikeStyle, NodeData>;
+  style?: CallableObject<NodeStyle, NodeData>;
   /**
    * <zh/> 节点状态样式
    *
    * <en/> Node state style
    */
-  state?: Record<string, CallableObject<NodeLikeStyle, NodeData>>;
+  state?: Record<string, CallableObject<NodeStyle, NodeData>>;
   /**
    * <zh/> 节点动画
    *
@@ -34,23 +36,16 @@ export type NodeOptions = {
    * <en/> Palette
    */
   palette?: PaletteOptions;
-};
+}
 
-export type StaticNodeOptions = {
-  style?: NodeLikeStyle;
-  state?: Record<string, NodeLikeStyle>;
+export interface StaticNodeOptions {
+  style?: NodeStyle;
+  state?: Record<string, NodeStyle>;
   animation?: AnimationOptions;
   palette?: PaletteOptions;
-};
+}
 
-/**
- * <zh/> 节点或 combo 样式
- *
- * <en/> Node or combo style
- */
-export type NodeLikeStyle = Pick<BaseStyleProps, 'cursor' | 'opacity' | 'pointerEvents' | 'visibility' | 'zIndex'> & {
-  type?: string;
-  x?: number;
-  y?: number;
-  z?: number;
-} & Record<string, unknown>;
+export interface NodeStyle extends BaseElementStyle, Partial<BaseNodeStyleProps> {
+  children?: ID[];
+  [key: string]: any;
+}
diff --git a/packages/g6/src/spec/index.ts b/packages/g6/src/spec/index.ts
index feebf64fd98..7e5d79125b9 100644
--- a/packages/g6/src/spec/index.ts
+++ b/packages/g6/src/spec/index.ts
@@ -5,7 +5,6 @@ export type { ComboOptions } from './element/combo';
 export type { EdgeOptions } from './element/edge';
 export type { NodeOptions } from './element/node';
 export type { LayoutOptions } from './layout';
-export type { OptimizeOptions } from './optimize';
 export type { PluginOptions } from './plugin';
 export type { G6Spec } from './spec';
 export type { ThemeOptions } from './theme';
diff --git a/packages/g6/src/spec/optimize.ts b/packages/g6/src/spec/optimize.ts
deleted file mode 100644
index caedbe950ec..00000000000
--- a/packages/g6/src/spec/optimize.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-export type OptimizeOptions = {
-  /**
-   * <zh/> 是否开启首次渲染时的分片渲染，若为 number，则表示开启分片渲染的元素数量上限
-   *
-   * <en/> Whether enable tile rendering for first time. If it is a number, it means the maximum number of elements for tile rendering.
-   */
-  tileFirstRender?: boolean | number;
-  /**
-   * <zh/> 首次渲染时的分片渲染的元素数量上限
-   *
-   * <en/> Tile size for first rendering.
-   */
-  tileFirstRenderSize?: number;
-  /**
-   * <zh/> 是否在 drag-canvas, zoom-canvas 显示/隐藏图形过程中，启用分片渲染。若指定 number，则表示开启分片渲染的元素数量上限。
-   *
-   * <en/> Whether enable tile hiding / showing for behaviors, e.g. hiding shapes while drag-canvas, zoom-canvas.
-   */
-  tileBehavior?: boolean | number;
-  /**
-   * <zh/> 交互的分片渲染单片/一帧渲染的元素数量
-   *
-   * <en/> Tile size for shape optimizing by behaviors, e.g. hiding shapes while drag-canvas, zoom-canvas.  The enableOptimize in behavior configuration has higher priority.
-   */
-  tileBehaviorSize?: number;
-  /**
-   * <zh/> 层级渲染的分片渲染单片/一帧渲染的元素数量
-   *
-   * <en/> Tile size for level of detail changing.
-   */
-  tileLodSize?: number;
-};
diff --git a/packages/g6/src/spec/spec.ts b/packages/g6/src/spec/spec.ts
index c8dbc141f40..4e7122a502f 100644
--- a/packages/g6/src/spec/spec.ts
+++ b/packages/g6/src/spec/spec.ts
@@ -16,70 +16,63 @@ import type { ViewportOptions } from './viewport';
  * <en/> Specification definition
  */
 
-export type G6Spec = CanvasOptions &
-  ViewportOptions & {
-    /**
-     * <zh/> 启用关闭、全局动画
-     *
-     * <en/> Enable or disable global animation
-     * @description
-     * <zh/> 为动画配置项时，会启用动画，并将该动画配置作为全局动画的基础配置
-     *
-     * <en/> When it is an animation configuration item, the animation will be enabled, and the animation configuration will be used as the basic configuration of the global animation
-     */
-    animation?: boolean | AnimationEffectTiming;
-    /**
-     * <zh/> 数据
-     *
-     * <en/> Data
-     */
-    data?: GraphData;
-    /**
-     * <zh/> 布局
-     *
-     * <en/> Layout
-     */
-    layout?: LayoutOptions;
-    /**
-     * <zh/> 节点
-     *
-     * <en/> Node
-     */
-    node?: NodeOptions;
-    /**
-     * <zh/> 边
-     *
-     * <en/> Edge
-     */
-    edge?: EdgeOptions;
-    /**
-     * <zh/> Combo
-     *
-     * <en/> Combo
-     */
-    combo?: ComboOptions;
-    /**
-     * <zh/> 主题
-     *
-     * <en/> Theme
-     */
-    theme?: ThemeOptions;
-    /**
-     * <zh/> 交互
-     *
-     * <en/> Behaviors
-     */
-    behaviors?: BehaviorOptions;
-    /**
-     * <zh/> 画布插件
-     *
-     * <en/> Canvas plugins
-     */
-    plugins?: PluginOptions;
-    /**
-     * <zh/> 优化选项
-     *
-     * <en/> Optimize options
-     */
-    // optimize?: OptimizeOptions;
-  };
+export interface G6Spec extends CanvasOptions, ViewportOptions {
+  /**
+   * <zh/> 启用关闭、全局动画
+   *
+   * <en/> Enable or disable global animation
+   * @description
+   * <zh/> 为动画配置项时，会启用动画，并将该动画配置作为全局动画的基础配置
+   *
+   * <en/> When it is an animation configuration item, the animation will be enabled, and the animation configuration will be used as the basic configuration of the global animation
+   */
+  animation?: boolean | AnimationEffectTiming;
+  /**
+   * <zh/> 数据
+   *
+   * <en/> Data
+   */
+  data?: GraphData;
+  /**
+   * <zh/> 布局
+   *
+   * <en/> Layout
+   */
+  layout?: LayoutOptions;
+  /**
+   * <zh/> 节点
+   *
+   * <en/> Node
+   */
+  node?: NodeOptions;
+  /**
+   * <zh/> 边
+   *
+   * <en/> Edge
+   */
+  edge?: EdgeOptions;
+  /**
+   * <zh/> Combo
+   *
+   * <en/> Combo
+   */
+  combo?: ComboOptions;
+  /**
+   * <zh/> 主题
+   *
+   * <en/> Theme
+   */
+  theme?: ThemeOptions;
+  /**
+   * <zh/> 交互
+   *
+   * <en/> Behaviors
+   */
+  behaviors?: BehaviorOptions;
+  /**
+   * <zh/> 画布插件
+   *
+   * <en/> Canvas plugins
+   */
+  plugins?: PluginOptions;
+}
diff --git a/packages/g6/src/spec/viewport.ts b/packages/g6/src/spec/viewport.ts
index 705c1ee8a2b..b1fdf3e3225 100644
--- a/packages/g6/src/spec/viewport.ts
+++ b/packages/g6/src/spec/viewport.ts
@@ -7,7 +7,7 @@ import type { Padding, STDPadding } from '../types/padding';
  * <en/> Viewport
  * @public
  */
-export type ViewportOptions = {
+export interface ViewportOptions {
   /**
    * <zh/> 视口 x 坐标
    *
@@ -54,17 +54,17 @@ export type ViewportOptions = {
    * <en/> zoom range
    */
   zoomRange?: [number, number];
-};
+}
 
 /**
  * @internal
  */
-export type STDViewportOptions = {
+export interface STDViewportOptions {
   autoFit?: STDAutoFit;
   padding?: STDPadding;
   zoom?: number;
   zoomRange?: [number, number];
-};
+}
 
 /**
  * <zh/> 视口自适应规则
diff --git a/packages/g6/src/themes/base.ts b/packages/g6/src/themes/base.ts
index 5d5d3da3048..e89fe669fdf 100644
--- a/packages/g6/src/themes/base.ts
+++ b/packages/g6/src/themes/base.ts
@@ -1,8 +1,8 @@
-import type { Palette } from '../palettes/types';
+import type { CategoricalPalette } from '../palettes/types';
 import type { PaletteOptions } from '../spec/element/palette';
 import type { Theme } from './types';
 
-const BADGE_PALETTE: Palette = ['#7E92B5', '#f5222d', '#faad14'];
+const BADGE_PALETTE: CategoricalPalette = ['#7E92B5', '#f5222d', '#faad14'];
 
 const NODE_PALETTE_OPTIONS: PaletteOptions = {
   type: 'group',
@@ -144,7 +144,7 @@ export function create(tokens: ThemeTokens): Theme {
         labelBackgroundPadding: [4, 4, 4, 4],
         labelFill: textColor,
         labelFontSize: 12,
-        labelPlacement: 'middle',
+        labelPlacement: 'center',
         labelTextBaseline: 'middle',
         lineWidth: 1,
       },
diff --git a/packages/g6/src/types/callable.ts b/packages/g6/src/types/callable.ts
index c11e62c16dd..118e865f1f3 100644
--- a/packages/g6/src/types/callable.ts
+++ b/packages/g6/src/types/callable.ts
@@ -26,6 +26,8 @@ export type CallableValue<Returns, Param = Returns> = Returns | ((args: Param) =
  *  fill: ({ model }) => model.value,
  * }
  */
-export type CallableObject<Obj extends Record<string, unknown>, Param = never> = {
-  [K in keyof Obj]: CallableValue<Obj[K], Param>;
-};
+export type CallableObject<Obj extends Record<string, unknown>, T> =
+  | ((datum: T, index: number, data: T[]) => Obj)
+  | {
+      [K in keyof Obj]: Obj[K] | ((datum: T, index: number, data: T[]) => NonNullable<Obj[K]>);
+    };
diff --git a/packages/g6/src/types/data.ts b/packages/g6/src/types/data.ts
index 633ae7deb26..c330738d1d9 100644
--- a/packages/g6/src/types/data.ts
+++ b/packages/g6/src/types/data.ts
@@ -1,13 +1,6 @@
-import type { Edge as EdgeGraphlib, Graph as Graphlib, Node as GraphlibNode, ID } from '@antv/graphlib';
+import type { ID } from '@antv/graphlib';
 import type { ComboData, EdgeData, NodeData } from '../spec/data';
 
-export type GraphlibModel = Graphlib<NodeData, EdgeData>;
-
-export type GraphlibData = {
-  nodes: GraphlibNode<NodeLikeData>[];
-  edges: EdgeGraphlib<EdgeData>[];
-};
-
 export type DataID = {
   nodes?: ID[];
   edges?: ID[];
diff --git a/packages/g6/src/types/element.ts b/packages/g6/src/types/element.ts
index febefe10744..d491f4d39a7 100644
--- a/packages/g6/src/types/element.ts
+++ b/packages/g6/src/types/element.ts
@@ -1,8 +1,10 @@
 import type { BaseStyleProps, PathStyleProps } from '@antv/g';
+import type { ID } from '@antv/graphlib';
 import type { BaseCombo } from '../elements/combos';
 import type { BaseEdge } from '../elements/edges';
 import type { BaseNode } from '../elements/nodes';
-import type { ComboOptions, EdgeOptions, NodeOptions } from '../spec';
+import type { ComboOptions, EdgeOptions, NodeData, NodeOptions } from '../spec';
+import type { NodeLikeData } from './data';
 import type { Padding } from './padding';
 import type { Placement } from './placement';
 import type { Size } from './size';
@@ -17,26 +19,32 @@ export type Edge = BaseEdge;
 
 export type Combo = BaseCombo;
 
+export type NodeLike = Node | Combo;
+
 export type Element = Node | Edge | Combo;
 
 export type BaseNodeProps = BaseStyleProps & {
   /**
    * <zh/> x 坐标
+   *
    * <en/> The x-coordinate of node
    */
   x?: number | string;
   /**
    * <zh/> y 坐标
+   *
    * <en/> The y-coordinate of node
    */
   y?: number | string;
   /**
    * <zh/> 节点大小，快捷设置节点宽高
+   *
    * <en/> The size of node, which is a shortcut to set the width and height of node
    */
   size?: Size;
   /**
    * <zh/> 主色
+   *
    * <en/> Subject color
    */
   color?: string;
@@ -55,7 +63,25 @@ export type BaseNodeProps = BaseStyleProps & {
    * <zh/> 父节点 id
    * <en/> The id of the parent node/combo
    */
-  parentId?: string;
+  parentId?: ID;
+  /**
+   * <zh/> 是否收起
+   *
+   * <en/> Indicates whether the node is collapsed
+   */
+  collapsed?: boolean;
+  /**
+   * <zh/> 子节点实例
+   *
+   * <en/> The instance of the child node
+   */
+  childrenNode?: Node[];
+  /**
+   * <zh/> 子节点数据
+   *
+   * <en/> The data of the child node
+   */
+  childrenData?: NodeData[];
 };
 
 export type BaseEdgeProps = BaseStyleProps &
@@ -90,19 +116,16 @@ export type BaseEdgeProps = BaseStyleProps &
     targetPort?: string;
   };
 
-export type BaseComboProps = {
+export type BaseComboProps = BaseNodeProps & {
   /**
    * <zh/> Combo 展开后的默认大小
+   *
    * <en/> The default size of combo when expanded
    */
   size?: Size;
-  /**
-   * <zh/> Combo 是否收起
-   * <en/> Indicates whether combo is collapsed
-   */
-  collapsed?: boolean;
   /**
    * <zh/> Combo 收起后的默认大小
+   *
    * <en/> The default size of combo when collapsed
    */
   collapsedSize?: Size;
@@ -113,9 +136,16 @@ export type BaseComboProps = {
   collapsedOrigin?: Placement | [number, number];
   /**
    * <zh/> Combo 的子元素，可以是节点或者 Combo
+   *
    * <en/> The children of combo, which can be nodes or combos
    */
-  children?: (Node | Combo)[];
+  childrenNode?: NodeLike[];
+  /**
+   * <zh/> Combo 的子元素数据，可以是节点或者 Combo
+   *
+   * <en/> The data of the children of combo, which can be nodes or combos
+   */
+  childrenData?: NodeLikeData[];
   /**
    * <zh/> Combo 的内边距，只在展开状态下生效
    * <en/> The padding of combo, only effective when expanded
diff --git a/packages/g6/src/utils/combo.ts b/packages/g6/src/utils/combo.ts
index f676b54a097..4156e4c2765 100644
--- a/packages/g6/src/utils/combo.ts
+++ b/packages/g6/src/utils/combo.ts
@@ -170,8 +170,8 @@ export function getDescendantCount(children: (Node | Combo)[], onlyNode = false)
     if (!onlyNode || isNode(child)) {
       count += 1;
     }
-    if ('children' in child.attributes) {
-      count += getDescendantCount(child.attributes.children as (Node | Combo)[], onlyNode);
+    if ('childrenNode' in child.attributes) {
+      count += getDescendantCount(child.attributes.childrenNode as (Node | Combo)[], onlyNode);
     }
   }
   return count;
diff --git a/packages/g6/src/utils/style.ts b/packages/g6/src/utils/style.ts
index 3f96c0e3ad5..0a5381ff2a3 100644
--- a/packages/g6/src/utils/style.ts
+++ b/packages/g6/src/utils/style.ts
@@ -1,5 +1,5 @@
 import { isFunction } from '@antv/util';
-import type { CallableObject, ElementData, ElementDatum, StyleIterationContext } from '../types';
+import type { CallableObject, ElementDatum, StyleIterationContext } from '../types';
 
 /**
  * <zh/> 计算支持回调的动态样式
@@ -10,9 +10,7 @@ import type { CallableObject, ElementData, ElementDatum, StyleIterationContext }
  * @returns <zh/> 静态样式 | <en/> static style
  */
 export function computeElementCallbackStyle(
-  callableStyle:
-    | CallableObject<Record<string, unknown>, [ElementDatum, number, ElementData]>
-    | ((...params: [ElementDatum, number, ElementData]) => Record<string, unknown>),
+  callableStyle: CallableObject<Record<string, unknown>, ElementDatum>,
   context: StyleIterationContext,
 ) {
   const { datum, index, elementData } = context;
diff --git a/packages/site/examples/item/arrows/demo/built-in-arrows.ts b/packages/site/examples/item/arrows/demo/built-in-arrows.ts
index 65e8713e241..31e481528f6 100644
--- a/packages/site/examples/item/arrows/demo/built-in-arrows.ts
+++ b/packages/site/examples/item/arrows/demo/built-in-arrows.ts
@@ -25,9 +25,9 @@ const graph = new Graph({
   edge: {
     style: {
       type: 'line', // 👈🏻 Edge shape type.
-      labelText: (d: any) => d.id,
+      labelText: (d) => d.id!,
       endArrow: true,
-      endArrowType: (d: any) => d.id.split('-')[0],
+      endArrowType: (d) => d.id.split('-')[0],
     },
   },
   layout: {
diff --git a/packages/site/examples/item/arrows/demo/custom-arrows.ts b/packages/site/examples/item/arrows/demo/custom-arrows.ts
index 583d204ebcc..d41c72f8697 100644
--- a/packages/site/examples/item/arrows/demo/custom-arrows.ts
+++ b/packages/site/examples/item/arrows/demo/custom-arrows.ts
@@ -40,7 +40,7 @@ const graph = new Graph({
     style: {
       type: 'line', // 👈🏻 Edge shape type.
       color: '#F6BD16',
-      labelText: (d: any) => d.id,
+      labelText: (d) => d.id!,
       endArrow: true,
     },
   },
diff --git a/packages/site/examples/item/defaultEdges/demo/cubic.ts b/packages/site/examples/item/defaultEdges/demo/cubic.ts
index ed5b488d3ff..3ff648cd437 100644
--- a/packages/site/examples/item/defaultEdges/demo/cubic.ts
+++ b/packages/site/examples/item/defaultEdges/demo/cubic.ts
@@ -37,7 +37,7 @@ const graph = new Graph({
   edge: {
     style: {
       type: 'cubic', // 👈🏻 Edge shape type.
-      labelText: (d: any) => d.id,
+      labelText: (d) => d.id!,
       endArrow: true,
     },
   },
diff --git a/packages/site/examples/item/defaultEdges/demo/horizontalCubic.ts b/packages/site/examples/item/defaultEdges/demo/horizontalCubic.ts
index a4f02648d75..44743644b9b 100644
--- a/packages/site/examples/item/defaultEdges/demo/horizontalCubic.ts
+++ b/packages/site/examples/item/defaultEdges/demo/horizontalCubic.ts
@@ -43,7 +43,7 @@ const graph = new Graph({
   edge: {
     style: {
       type: 'cubic-horizontal', // 👈🏻 Edge shape type.
-      labelText: (d: any) => d.id,
+      labelText: (d) => d.id!,
       endArrow: true,
     },
   },
diff --git a/packages/site/examples/item/defaultEdges/demo/line.ts b/packages/site/examples/item/defaultEdges/demo/line.ts
index 0fd0827810e..c94cc70c2db 100644
--- a/packages/site/examples/item/defaultEdges/demo/line.ts
+++ b/packages/site/examples/item/defaultEdges/demo/line.ts
@@ -37,7 +37,7 @@ const graph = new Graph({
   edge: {
     style: {
       type: 'line', // 👈🏻 Edge shape type.
-      labelText: (d: any) => d.id,
+      labelText: (d) => d.id!,
       endArrow: true,
     },
   },
diff --git a/packages/site/examples/item/defaultEdges/demo/loopCurve.ts b/packages/site/examples/item/defaultEdges/demo/loopCurve.ts
index a4a5097eb1d..1650ae33b15 100644
--- a/packages/site/examples/item/defaultEdges/demo/loopCurve.ts
+++ b/packages/site/examples/item/defaultEdges/demo/loopCurve.ts
@@ -1,69 +1,68 @@
-import { Graph } from '@antv/g6';
+import type { GraphData } from '@antv/g6';
+import { Graph, Utils } from '@antv/g6';
 
-const data = {
+const data: GraphData = {
   nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3-ports' }, { id: 'node4-ports' }],
   edges: [
     {
       id: 'loop-1',
       source: 'node1',
       target: 'node1',
-      placement: 'top',
+      style: { placement: 'top' },
     },
     {
       id: 'loop-2',
       source: 'node1',
       target: 'node1',
-      placement: 'right',
+      style: { placement: 'right' },
     },
     {
       id: 'loop-3',
       source: 'node1',
       target: 'node1',
-      placement: 'bottom',
+      style: { placement: 'bottom' },
     },
     {
       id: 'loop-4',
       source: 'node1',
       target: 'node1',
-      placement: 'left',
+      style: { placement: 'left' },
     },
     {
       id: 'loop-5',
       source: 'node2',
       target: 'node2',
-      placement: 'top-right',
+      style: { placement: 'top-right' },
     },
     {
       id: 'loop-6',
       source: 'node2',
       target: 'node2',
-      placement: 'bottom-right',
+      style: { placement: 'bottom-right' },
     },
     {
       id: 'loop-7',
       source: 'node2',
       target: 'node2',
-      placement: 'bottom-left',
+      style: { placement: 'bottom-left' },
     },
     {
       id: 'loop-8',
       source: 'node2',
       target: 'node2',
-      placement: 'top-left',
+      style: { placement: 'top-left' },
     },
     {
       id: 'loop-9',
       source: 'node3-ports',
       target: 'node3-ports',
-      sourcePort: 'port1',
-      targetPort: 'port2',
+      style: { sourcePort: 'port1', targetPort: 'port2' },
     },
     {
       id: 'loop-10',
       source: 'node4-ports',
       target: 'node4-ports',
-      sourcePort: 'port2',
-      targetPort: 'port2',
+      style: { sourcePort: 'port2', targetPort: 'port2' },
     },
   ],
 };
@@ -75,7 +74,7 @@ const graph = new Graph({
     style: {
       type: 'rect',
       size: [80, 30],
-      port: (d: any) => d.id.includes('ports'),
+      port: (d) => Utils.idOf(d).toString().includes('ports'),
       portR: 3,
       ports: [
         {
@@ -92,10 +91,10 @@ const graph = new Graph({
   edge: {
     style: {
       type: 'line',
-      sourcePort: (d: any) => d.sourcePort,
-      targetPort: (d: any) => d.targetPort,
+      sourcePort: (d) => d.style!.sourcePort,
+      targetPort: (d) => d.style!.targetPort,
       endArrow: true,
-      loopPlacement: (d: any) => d.placement,
+      loopPlacement: (d) => d.style!.placement,
     },
   },
   layout: {
diff --git a/packages/site/examples/item/defaultEdges/demo/loopPolyline.ts b/packages/site/examples/item/defaultEdges/demo/loopPolyline.ts
index 82563d299dd..b0b11068427 100644
--- a/packages/site/examples/item/defaultEdges/demo/loopPolyline.ts
+++ b/packages/site/examples/item/defaultEdges/demo/loopPolyline.ts
@@ -75,7 +75,7 @@ const graph = new Graph({
     style: {
       type: 'rect',
       size: [80, 30],
-      port: (d: any) => d.id.includes('ports'),
+      port: (d) => d.id.includes('ports'),
       portR: 3,
       ports: [
         {
@@ -92,10 +92,10 @@ const graph = new Graph({
   edge: {
     style: {
       type: 'polyline',
-      sourcePort: (d: any) => d.sourcePort,
-      targetPort: (d: any) => d.targetPort,
+      sourcePort: (d) => d.sourcePort,
+      targetPort: (d) => d.targetPort,
       endArrow: true,
-      loopPlacement: (d: any) => d.placement,
+      loopPlacement: (d) => d.placement,
     },
   },
   layout: {
diff --git a/packages/site/examples/item/defaultEdges/demo/polyline.ts b/packages/site/examples/item/defaultEdges/demo/polyline.ts
index 685c82f7d62..e8da9eb6e0f 100644
--- a/packages/site/examples/item/defaultEdges/demo/polyline.ts
+++ b/packages/site/examples/item/defaultEdges/demo/polyline.ts
@@ -10,7 +10,7 @@ const data = {
       id: 'edge-1',
       source: 'node-1',
       target: 'node-2',
-      controlPoints: [[300, 190]],
+      style: { controlPoints: [[300, 190]] },
     },
   ],
 };
@@ -21,7 +21,7 @@ const graph = new Graph({
   edge: {
     style: {
       type: 'polyline', // 👈🏻 Edge shape type.
-      controlPoints: (d: any) => d.controlPoints,
+      controlPoints: (d) => d.style.controlPoints,
     },
   },
   behaviors: [{ type: 'drag-node' }],
diff --git a/packages/site/examples/item/defaultEdges/demo/polylineOrthHasCPs.ts b/packages/site/examples/item/defaultEdges/demo/polylineOrthHasCPs.ts
index 64279f29a50..f3ed3b2508c 100644
--- a/packages/site/examples/item/defaultEdges/demo/polylineOrthHasCPs.ts
+++ b/packages/site/examples/item/defaultEdges/demo/polylineOrthHasCPs.ts
@@ -11,7 +11,7 @@ const data = {
       id: 'edge-1',
       source: 'node-1',
       target: 'node-2',
-      controlPoints: [[300, 190]],
+      style: { controlPoints: [[300, 190]] },
     },
   ],
 };
@@ -23,7 +23,7 @@ const graph = new Graph({
     style: {
       type: 'polyline', // 👈🏻 Edge shape type.
       router: true,
-      controlPoints: (d: any) => d.controlPoints,
+      controlPoints: (d) => d.style.controlPoints,
     },
   },
   behaviors: [{ type: 'drag-node' }],
diff --git a/packages/site/examples/item/defaultEdges/demo/quadratic.ts b/packages/site/examples/item/defaultEdges/demo/quadratic.ts
index 68e3ce33f83..3e49bc2f555 100644
--- a/packages/site/examples/item/defaultEdges/demo/quadratic.ts
+++ b/packages/site/examples/item/defaultEdges/demo/quadratic.ts
@@ -37,7 +37,7 @@ const graph = new Graph({
   edge: {
     style: {
       type: 'quadratic', // 👈🏻 Edge shape type.
-      labelText: (d: any) => d.id,
+      labelText: (d) => d.id!,
       endArrow: true,
     },
   },
diff --git a/packages/site/examples/item/defaultEdges/demo/verticalCubic.ts b/packages/site/examples/item/defaultEdges/demo/verticalCubic.ts
index 87855128f2d..c8113e8f326 100644
--- a/packages/site/examples/item/defaultEdges/demo/verticalCubic.ts
+++ b/packages/site/examples/item/defaultEdges/demo/verticalCubic.ts
@@ -43,7 +43,7 @@ const graph = new Graph({
   edge: {
     style: {
       type: 'cubic-vertical', // 👈🏻 Edge shape type.
-      labelText: (d: any) => d.id,
+      labelText: (d) => d.id!,
       endArrow: true,
     },
   },
diff --git a/packages/site/examples/item/ports/demo/ports.ts b/packages/site/examples/item/ports/demo/ports.ts
index c02f9cb4e10..b9edddb5379 100644
--- a/packages/site/examples/item/ports/demo/ports.ts
+++ b/packages/site/examples/item/ports/demo/ports.ts
@@ -1,4 +1,4 @@
-import { Graph } from '@antv/g6';
+import { Graph, Utils } from '@antv/g6';
 
 const data = {
   nodes: [
@@ -24,10 +24,10 @@ const graph = new Graph({
   data,
   node: {
     style: {
-      type: (d: any) => (d.id === 'node-1' ? 'circle' : 'rect'),
-      size: (d: any) => (d.id === 'node-1' ? 30 : [50, 150]),
+      type: (d) => (d.id === 'node-1' ? 'circle' : 'rect'),
+      size: (d) => (d.id === 'node-1' ? 30 : [50, 150]),
       port: true,
-      ports: (d: any) =>
+      ports: (d) =>
         d.id === 'node-2'
           ? [
               { key: 'port-1', placement: [0, 0.15] },
@@ -39,7 +39,7 @@ const graph = new Graph({
   },
   edge: {
     style: {
-      targetPort: (d: any) => `port-${d.id.split('-')[1]}`,
+      targetPort: (d) => `port-${Utils.idOf(d).toString().split('-')[1]}`,
       endArrow: true,
     },
   },
diff --git a/packages/site/examples/net/circular/demo/spiral.ts b/packages/site/examples/net/circular/demo/spiral.ts
index fbeca5e761a..63f89067a92 100644
--- a/packages/site/examples/net/circular/demo/spiral.ts
+++ b/packages/site/examples/net/circular/demo/spiral.ts
@@ -394,7 +394,7 @@ const graph = new Graph({
   node: {
     style: {
       size: 20,
-      labelText: (d: { id: string }) => d.id,
+      labelText: (d) => d.id,
       fill: '#EFF4FF',
       lineWidth: 1,
       stroke: '#5F95FF',