@antv/layout 2.0.0-alpha.4 → 2.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/layout",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-beta.1",
   "description": "graph layout algorithm",
   "main": "dist/index.min.js",
   "module": "lib/index.js",
@@ -35,6 +35,7 @@
   ],
   "dependencies": {
     "@antv/event-emitter": "^0.1.3",
+    "@antv/expr": "^1.0.2",
     "@antv/graphlib": "^2.0.0",
     "@antv/util": "^3.3.2",
     "comlink": "^4.4.1",
@@ -66,6 +67,7 @@
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-import": "^2.29.1",
+    "gh-pages": "^6.3.0",
     "husky": "^7.0.4",
     "interactjs": "^1.10.27",
     "jest": "^30.2.0",
@@ -101,11 +103,12 @@
     "size": "limit-size",
     "test:coverage:open": "open-cli coverage/lcov-report/index.html",
     "test:coverage": "jest --coverage",
-    "test": "jest"
+    "test": "jest",
+    "deploy": "npm --prefix site run build && gh-pages -d site/doc_build"
   },
   "publishConfig": {
     "access": "public",
-    "tag": "alpha",
+    "tag": "beta",
     "registry": "https://registry.npmjs.org/"
   },
   "limit-size": [

package/src/algorithm/antv-dagre/index.ts

@@ -1,8 +1,7 @@
 import { isNumber } from '@antv/util';
 import type { NodeData, PointObject } from '../../types';
 import { parsePoint } from '../../util';
-import { formatNumberFn, formatSizeFn } from '../../util/format';
-import { parseSize } from '../../util/size';
+import { formatNodeSizeFn, formatNumberFn } from '../../util/format';
 import { BaseLayout } from '../base-layout';
 import { DagreGraph, GraphNode } from './graph';
 import { layout } from './layout';
@@ -12,6 +11,7 @@ export type { AntVDagreLayoutOptions };
 
 const DEFAULTS_LAYOUT_OPTIONS: Partial<AntVDagreLayoutOptions> = {
   nodeSize: 10,
+  nodeSpacing: 0,
   rankdir: 'TB',
   nodesep: 50, // 节点水平间距(px)
   ranksep: 50, // 每一层节点之间间距
@@ -37,6 +37,7 @@ export class AntVDagreLayout extends BaseLayout<AntVDagreLayoutOptions> {
   protected async layout(options: AntVDagreLayoutOptions): Promise<void> {
     const {
       nodeSize,
+      nodeSpacing,
       align,
       rankdir = 'TB',
       ranksep,
@@ -54,21 +55,16 @@ export class AntVDagreLayout extends BaseLayout<AntVDagreLayoutOptions> {
       nodesepFunc,
     } = options;
 
-    const ranksepfunc = formatNumberFn(ranksepFunc, ranksep ?? 50);
-    const nodesepfunc = formatNumberFn(nodesepFunc, nodesep ?? 50);
-    let horisep: (d?: NodeData | undefined) => number = nodesepfunc;
-    let vertisep: (d?: NodeData | undefined) => number = ranksepfunc;
+    const ranksepfunc = formatNumberFn(ranksepFunc, ranksep ?? 50, 'node');
+    const nodesepfunc = formatNumberFn(nodesepFunc, nodesep ?? 50, 'node');
+    let horisep: (node: NodeData) => number = nodesepfunc;
+    let vertisep: (node: NodeData) => number = ranksepfunc;
 
     if (rankdir === 'LR' || rankdir === 'RL') {
       horisep = ranksepfunc;
       vertisep = nodesepfunc;
     }
 
-    const nodeSizeFunc = formatSizeFn(
-      nodeSize,
-      DEFAULTS_LAYOUT_OPTIONS.nodeSize as number,
-    );
-
     // Create internal graph
     const g = new DagreGraph<NodeData, any>({ tree: [] });
 
@@ -76,9 +72,16 @@ export class AntVDagreLayout extends BaseLayout<AntVDagreLayoutOptions> {
     const nodes = this.model.nodes();
     const edges = this.model.edges();
 
+    const sizeFn = formatNodeSizeFn(
+      nodeSize,
+      nodeSpacing,
+      DEFAULTS_LAYOUT_OPTIONS.nodeSize as number,
+      DEFAULTS_LAYOUT_OPTIONS.nodeSpacing as number,
+    );
+
     nodes.forEach((node) => {
       const raw = node._original;
-      const size = parseSize(nodeSizeFunc(raw));
+      const size = sizeFn(raw);
       const verti = vertisep(raw);
       const hori = horisep(raw);
       const width = size[0] + 2 * hori;

package/src/algorithm/antv-dagre/types.ts

@@ -1,4 +1,4 @@
-import { ID, NodeData, Point, Size } from '../../types';
+import type { Expr, ID, NodeData, Point } from '../../types';
 import { BaseLayoutOptions } from '../base-layout';
 
 export type DagreRankdir =
@@ -62,17 +62,6 @@ export interface AntVDagreLayoutOptions extends BaseLayoutOptions {
    * @defaultValue undefined
    */
   begin?: Point;
-  /**
-   * <zh/> 节点大小（直径）。
-   *
-   * <en/> The diameter of the node
-   * @remarks
-   * <zh/> 用于防止节点重叠时的碰撞检测
-   *
-   * <en/> Used for collision detection when nodes overlap
-   * @defaultValue undefined
-   */
-  nodeSize?: Size | ((d?: NodeData) => Size);
   /**
    * <zh/> 节点间距（px）
    *
@@ -105,7 +94,7 @@ export interface AntVDagreLayoutOptions extends BaseLayoutOptions {
    * <en/> The horizontal spacing of the node in the case of rankdir is 'TB' or 'BT', and the vertical spacing of the node in the case of rankdir is 'LR' or 'RL'. The priority is higher than nodesep, that is, if nodesepFunc is set, nodesep does not take effect
    * @param d - <zh/> 节点实例 | <en/> Node instance
    */
-  nodesepFunc?: (d?: NodeData) => number;
+  nodesepFunc?: Expr | ((node: NodeData) => number);
   /**
    * <zh/> 层间距（px）的回调函数
    *
@@ -116,7 +105,7 @@ export interface AntVDagreLayoutOptions extends BaseLayoutOptions {
    * <en/> The vertical spacing of adjacent layers in the case of rankdir is 'TB' or 'BT', and the horizontal spacing of adjacent layers in the case of rankdir is 'LR' or 'RL'. The priority is higher than nodesep, that is, if nodesepFunc is set, nodesep does not take effect
    * @param d - <zh/> 节点实例 | <en/> Node instance
    */
-  ranksepFunc?: (d?: NodeData) => number;
+  ranksepFunc?: Expr | ((node: NodeData) => number);
   /**
    * <zh/> 是否同时计算边上的的控制点位置
    *

package/src/algorithm/circular/index.ts

@@ -1,4 +1,3 @@
-import { isNil } from '@antv/util';
 import { normalizeViewport, orderByDegree, orderByTopology } from '../../util';
 import { applySingleNodeLayout } from '../../util/common';
 import { formatNodeSizeFn } from '../../util/format';
@@ -18,6 +17,7 @@ const DEFAULT_LAYOUT_OPTIONS: CircularLayoutOptions = {
   ordering: null,
   angleRatio: 1,
   nodeSize: 10,
+  nodeSpacing: 0,
 };
 
 /**
@@ -67,16 +67,17 @@ export class CircularLayout extends BaseLayout<CircularLayoutOptions> {
     let { radius, startRadius, endRadius } = this.options;
 
     const nodes = this.model.nodes();
-    const format = formatNodeSizeFn(
+    const sizeFn = formatNodeSizeFn(
       nodeSize,
       nodeSpacing,
       DEFAULT_LAYOUT_OPTIONS.nodeSize as number,
+      DEFAULT_LAYOUT_OPTIONS.nodeSpacing as number,
     );
 
-    if (!isNil(nodeSpacing)) {
+    if (nodeSpacing) {
       let perimeter = 0;
       for (const node of nodes) {
-        perimeter += format(node._original);
+        perimeter += Math.max(...sizeFn(node._original));
       }
       radius = perimeter / (2 * Math.PI);
     } else if (!radius && !startRadius && !endRadius) {

package/src/algorithm/circular/types.ts

@@ -1,5 +1,4 @@
 import type { BaseLayoutOptions } from '../types';
-import type { NodeData, Size } from '../../types';
 
 /**
  * <zh/> 环形 Circular 布局配置
@@ -85,20 +84,6 @@ export interface CircularLayoutOptions extends BaseLayoutOptions {
    * @defaultValue 2 * Math.PI
    */
   endAngle?: number;
-  /**
-   * <zh/> 环与环之间最小间距，用于调整半径
-   *
-   * <en/> Minimum spacing between rings, used to adjust the radius
-   * @defaultValue 0
-   */
-  nodeSpacing?: number | ((d?: NodeData) => number);
-  /**
-   * <zh/> 节点大小（直径）。用于防止节点重叠时的碰撞检测
-   *
-   * <en/> Node size (diameter). Used for collision detection when nodes overlap
-   * @defaultValue 10
-   */
-  nodeSize?: Size | ((d?: NodeData) => Size);
 }
 
 export interface ParsedCircularLayoutOptions

package/src/algorithm/combo-combined/index.ts

@@ -1,14 +1,7 @@
 import { registry } from '../../registry';
-import type {
-  GraphData,
-  ID,
-  LayoutNode,
-  NodeData,
-  Point,
-  STDSize,
-} from '../../types';
-import { normalizeViewport, parseSize } from '../../util';
-import { formatNodeSizeFn, formatNumberFn } from '../../util/format';
+import type { GraphData, ID, LayoutNode, Point, STDSize } from '../../types';
+import { normalizeViewport } from '../../util';
+import { formatFn, formatNodeSizeFn, formatNumberFn } from '../../util/format';
 import { BaseLayout, isLayoutWithIterations } from '../base-layout';
 import type { Layout } from '../types';
 import type {
@@ -205,7 +198,10 @@ export class ComboCombinedLayout extends BaseLayout<ComboCombinedLayoutOptions>
   }
 
   private getLayoutConfig(combo: HierarchyNode) {
-    const { layout } = this.options;
+    const layout =
+      typeof this.options.layout === 'object'
+        ? this.options.layout
+        : formatFn(this.options.layout, ['comboId']);
 
     if (typeof layout === 'function') {
       const comboId = combo.id === ROOT_ID ? null : combo.id!;
@@ -219,7 +215,7 @@ export class ComboCombinedLayout extends BaseLayout<ComboCombinedLayoutOptions>
     const base = {
       type: 'concentric',
       ...normalizeViewport(this.options),
-      nodeSize: (d: NodeData) => d.size,
+      nodeSize: 'node.size',
       nodeSpacing: 0,
     };
 
@@ -334,8 +330,12 @@ export class ComboCombinedLayout extends BaseLayout<ComboCombinedLayoutOptions>
       return { center: [0, 0], width: 0, height: 0 };
     }
 
-    const comboPaddingFn = formatNumberFn(this.options.comboPadding, 20);
-    const padding = comboPaddingFn(combo._original);
+    const comboPaddingFn = formatNumberFn(
+      this.options.comboPadding,
+      20,
+      'combo',
+    );
+    const padding = comboPaddingFn(combo._original!);
 
     return {
       center: [(minX + maxX) / 2, (minY + maxY) / 2],
@@ -359,15 +359,19 @@ export class ComboCombinedLayout extends BaseLayout<ComboCombinedLayoutOptions>
   ): STDSize {
     const { nodeSize, nodeSpacing } = this.options;
     const sizeFn = formatNodeSizeFn(nodeSize, includeSpacing ? nodeSpacing : 0);
-    return parseSize(sizeFn(node._original));
+    return sizeFn(node._original!);
   }
 
   private getComboSize(
     combo: HierarchyNode,
     includeSpacing: boolean = true,
   ): STDSize {
-    const comboSpacingFn = formatNumberFn(this.options.comboSpacing, 0);
-    const spacing = includeSpacing ? comboSpacingFn(combo._original) : 0;
+    const comboSpacingFn = formatNumberFn(
+      this.options.comboSpacing,
+      0,
+      'combo',
+    );
+    const spacing = includeSpacing ? comboSpacingFn(combo._original!) : 0;
     const [width, height] = combo.size as STDSize;
     return [width + spacing / 2, height + spacing / 2, 0];
   }

package/src/algorithm/combo-combined/types.ts

@@ -1,9 +1,7 @@
+import type { Expr, ID, NodeData } from '../../types';
 import type { BaseLayoutOptions } from '../types';
-import type { ID, NodeData, Size } from '../../types';
 
-export type ComboCombinedLayoutConfig =
-  | string
-  | { type: string; [key: string]: any };
+export type ComboCombinedLayoutConfig = { type: string; [key: string]: any };
 
 export interface ComboCombinedLayoutOptions extends BaseLayoutOptions {
   /**
@@ -11,29 +9,16 @@ export interface ComboCombinedLayoutOptions extends BaseLayoutOptions {
    */
   layout?:
     | ComboCombinedLayoutConfig
-    | ((comboId: ID | null) => ComboCombinedLayoutConfig);
-
-  /**
-   * <zh/> 节点尺寸
-   *
-   * <en/> Node size
-   */
-  nodeSize?: Size | ((node?: NodeData) => Size);
-
-  /**
-   * <zh/> 节点间距
-   *
-   * <en/> Node spacing
-   */
-  nodeSpacing?: number | ((node?: NodeData) => number);
+    | ((comboId: ID | null) => ComboCombinedLayoutConfig)
+    | Expr;
 
   /**
    * Combo 之间的间距
    */
-  comboSpacing?: number | ((combo?: NodeData) => number);
+  comboSpacing?: number | ((combo: NodeData) => number) | Expr;
 
   /**
    * Combo 内部的边距
    */
-  comboPadding?: number | ((combo?: NodeData) => number);
+  comboPadding?: number | ((combo: NodeData) => number) | Expr;
 }

package/src/algorithm/concentric/index.ts

@@ -1,4 +1,3 @@
-import { BaseLayout } from '../base-layout';
 import type { LayoutNode, NodeData } from '../../types';
 import {
   applySingleNodeLayout,
@@ -6,7 +5,8 @@ import {
   orderByDegree,
   orderBySorter,
 } from '../../util';
-import { formatNodeSizeFn } from '../../util/format';
+import { formatFn, formatNodeSizeFn } from '../../util/format';
+import { BaseLayout } from '../base-layout';
 import type { ConcentricLayoutOptions } from './types';
 
 export type { ConcentricLayoutOptions };
@@ -52,25 +52,21 @@ export class ConcentricLayout extends BaseLayout<ConcentricLayoutOptions> {
       equidistant,
       preventOverlap,
       startAngle = DEFAULTS_LAYOUT_OPTIONS.startAngle,
-      nodeSize = DEFAULTS_LAYOUT_OPTIONS.nodeSize,
+      nodeSize,
       nodeSpacing,
     } = this.options;
 
-    let sortBy: ConcentricLayoutOptions['sortBy'] = propsSortBy;
-    if (propsSortBy && typeof propsSortBy === 'function') {
-      const testNode = this.model.firstNode()!;
-      const testValue = propsSortBy(testNode._original);
-      if (typeof testValue !== 'number') sortBy = 'degree';
-    } else {
-      sortBy = 'degree';
-    }
+    const sortBy =
+      !propsSortBy || propsSortBy === 'degree'
+        ? ('degree' as const)
+        : (formatFn(propsSortBy, ['node']) as (node: NodeData) => number);
 
     if (sortBy === 'degree') {
       orderByDegree(this.model);
     } else {
       const sorter = (nodeA: NodeData, nodeB: NodeData) => {
-        const a = (sortBy as (node: NodeData) => number)(nodeA);
-        const b = (sortBy as (node: NodeData) => number)(nodeB);
+        const a = sortBy(nodeA);
+        const b = sortBy(nodeB);
         return a === b ? 0 : a > b ? -1 : 1;
       };
       orderBySorter(this.model, sorter);
@@ -83,17 +79,23 @@ export class ConcentricLayout extends BaseLayout<ConcentricLayoutOptions> {
       const v =
         sortBy === 'degree'
           ? this.model.degree(node.id)
-          : sortBy?.(node._original);
+          : sortBy(node._original);
       sortKeys.set(node.id, v);
     }
 
     const maxValueNode = this.model.firstNode()!;
     const maxLevelDiff = propsMaxLevelDiff || sortKeys.get(maxValueNode.id) / 4;
 
-    const nodeSizeFn = formatNodeSizeFn(nodeSize, nodeSpacing);
+    const sizeFn = formatNodeSizeFn(
+      nodeSize,
+      nodeSpacing,
+      DEFAULTS_LAYOUT_OPTIONS.nodeSize as number,
+      DEFAULTS_LAYOUT_OPTIONS.nodeSpacing as number,
+    );
+
     const nodeDistances = new Map<LayoutNode['id'], number>();
     for (const node of nodes) {
-      nodeDistances.set(node.id, nodeSizeFn(node._original));
+      nodeDistances.set(node.id, Math.max(...sizeFn(node._original)));
     }
 
     // put the values into levels

package/src/algorithm/concentric/types.ts

@@ -1,5 +1,5 @@
+import type { Expr, NodeData } from '../../types';
 import type { BaseLayoutOptions } from '../types';
-import type { NodeData, Size } from '../../types';
 
 /**
  * <zh/> Concentric 同心圆布局配置
@@ -18,20 +18,6 @@ export interface ConcentricLayoutOptions extends BaseLayoutOptions {
    * @defaultValue false
    */
   preventOverlap?: boolean;
-  /**
-   * <zh/> 节点大小（直径）。用于防止节点重叠时的碰撞检测
-   *
-   * <en/> Node size (diameter). Used for collision detection when preventing node overlap
-   * @defaultValue 30
-   */
-  nodeSize?: Size | ((d?: NodeData) => Size);
-  /**
-   * <zh/> 环与环之间最小间距，用于调整半径
-   *
-   * <en/> Minimum spacing between rings, used to adjust the radius
-   * @defaultValue 10
-   */
-  nodeSpacing?: number | ((d?: NodeData) => number);
   /**
    * <zh/> 第一个节点与最后一个节点之间的弧度差
    *
@@ -85,5 +71,5 @@ export interface ConcentricLayoutOptions extends BaseLayoutOptions {
    * - ((node) => ...): Custom sorting function, returns a number, the higher the value, the more the node will be placed in the center
    * @defaultValue degree
    */
-  sortBy?: 'degree' | ((d?: NodeData) => number);
+  sortBy?: 'degree' | Expr | ((node: NodeData) => number);
 }

package/src/algorithm/d3-force/index.ts

@@ -12,7 +12,7 @@ import {
 } from 'd3-force';
 import type { ID, Position } from '../../types';
 import { assignDefined, normalizeViewport } from '../../util';
-import { formatNodeSizeFn } from '../../util/format';
+import { formatFn, formatNodeSizeFn } from '../../util/format';
 import { BaseLayoutWithIterations } from '../base-layout';
 import forceInABox from './force-in-a-box';
 import type {
@@ -25,9 +25,7 @@ import type {
 export type { D3ForceLayoutOptions };
 
 const DEFAULTS_LAYOUT_OPTIONS: Partial<D3ForceLayoutOptions> = {
-  link: {
-    id: (d) => String(d.id),
-  },
+  edgeId: 'edge.id',
 
   manyBody: {
     strength: -30,
@@ -325,7 +323,9 @@ export class D3ForceLayout<
     if (options.manyBody === false) return undefined;
 
     return assignDefined({}, options.manyBody || {}, {
-      strength: options.nodeStrength,
+      strength: options.nodeStrength
+        ? formatFn(options.nodeStrength, ['node'])
+        : undefined,
       distanceMin: options.distanceMin,
       distanceMax: options.distanceMax,
       theta: options.theta,
@@ -362,9 +362,13 @@ export class D3ForceLayout<
     if (options.link === false) return undefined;
 
     return assignDefined({}, options.link || {}, {
-      id: options.edgeId,
-      distance: options.linkDistance,
-      strength: options.edgeStrength,
+      id: options.edgeId ? formatFn(options.edgeId, ['edge']) : undefined,
+      distance: options.linkDistance
+        ? formatFn(options.linkDistance, ['edge'])
+        : undefined,
+      strength: options.edgeStrength
+        ? formatFn(options.edgeStrength, ['edge'])
+        : undefined,
       iterations: options.edgeIterations,
     });
   }
@@ -401,14 +405,13 @@ export class D3ForceLayout<
     )
       return undefined;
 
-    const radius =
-      options.nodeSize || options.nodeSpacing
-        ? (d: NodeDatum) =>
-            formatNodeSizeFn(
-              options.nodeSize,
-              options.nodeSpacing,
-            )(d._original) / 2
-        : undefined;
+    const sizeFn = formatNodeSizeFn(
+      options.nodeSize,
+      options.nodeSpacing,
+      DEFAULTS_LAYOUT_OPTIONS.nodeSize as number,
+      DEFAULTS_LAYOUT_OPTIONS.nodeSpacing as number,
+    );
+    const radius = (d: NodeDatum) => Math.max(...sizeFn(d._original)) / 2;
 
     return assignDefined({}, options.collide || {}, {
       radius: (options.collide && options.collide.radius) || radius,
@@ -524,7 +527,11 @@ export class D3ForceLayout<
     if (radial) {
       let force = simulation.force('radial');
       if (!force) {
-        force = forceRadial(radial.radius || 100, radial.x, radial.y);
+        force = forceRadial(
+          (radial.radius as () => number) || 100,
+          radial.x,
+          radial.y,
+        );
         simulation.force('radial', force as any);
       }
 
@@ -567,7 +574,7 @@ export class D3ForceLayout<
         ['centerY', center && center.y],
         ['template', 'force'],
         ['strength', clusterFociStrength],
-        ['groupBy', clusterBy],
+        ['groupBy', clusterBy ? formatFn(clusterBy, ['node']) : undefined],
         ['nodes', this.model.nodes()],
         ['links', this.model.edges()],
         ['forceLinkDistance', clusterEdgeDistance],

package/src/algorithm/d3-force/types.ts

@@ -3,8 +3,8 @@ import type {
   SimulationLinkDatum,
   SimulationNodeDatum,
 } from 'd3-force';
+import type { Expr, LayoutEdge, LayoutNode } from '../../types';
 import type { BaseLayoutOptions, Layout } from '../types';
-import type { LayoutEdge, LayoutNode } from '../../types';
 
 export interface D3ForceCommonOptions
   extends Omit<BaseLayoutOptions, 'center'> {
@@ -42,21 +42,21 @@ export interface D3ForceCommonOptions
    * <en/> Unique identifier field or function for edges
    * @defaultValue (edge) => String(edge.id)
    */
-  edgeId?: (edge: EdgeDatum) => string;
+  edgeId?: Expr | ((edge: EdgeDatum) => string);
   /**
    * <zh/> 边的理想长度，可以是数值或根据边数据返回长度的函数
    *
    * <en/> Ideal length of edges, can be a number or a function that returns length based on edge data
    * @defaultValue 50
    */
-  linkDistance?: number | ((edge: EdgeDatum) => number);
+  linkDistance?: number | Expr | ((edge: EdgeDatum) => number);
   /**
    * <zh/> 边的强度，可以是数值或根据边数据返回强度的函数。值范围为 [0, 1]
    *
    * <en/> Strength of edges, can be a number or a function that returns strength based on edge data. Value range is [0, 1]
    * @defaultValue null
    */
-  edgeStrength?: number | ((edge: EdgeDatum) => number) | null;
+  edgeStrength?: number | Expr | ((edge: EdgeDatum) => number) | null;
   /**
    * <zh/> 链接力的迭代次数
    *
@@ -70,7 +70,7 @@ export interface D3ForceCommonOptions
    * <en/> Strength of node force, negative for repulsion, positive for attraction
    * @defaultValue -30
    */
-  nodeStrength?: number | ((node: NodeDatum) => number);
+  nodeStrength?: number | Expr | ((node: NodeDatum) => number);
   /**
    * <zh/> 多体力的近似参数，值范围为 (0, 1]
    *
@@ -113,21 +113,6 @@ export interface D3ForceCommonOptions
    * @defaultValue 1
    */
   collideIterations?: number;
-  /**
-   * <zh/> 节点大小（直径）。用于防止节点重叠时的碰撞检测
-   *
-   * <en/> Node size (diameter). Used for collision detection when nodes overlap
-   *
-   * @defaultValue 10
-   */
-  nodeSize?: number | ((d?: NodeDatum) => number);
-  /**
-   * <zh/> 节点之间的最小间距
-   *
-   * <en/> Minimum spacing between nodes
-   * @defaultValue 0
-   */
-  nodeSpacing?: number | ((d?: NodeDatum) => number);
   /**
    * <zh/> 径向力的理想半径，可以是数值或根据节点数据返回半径的函数
    *
@@ -169,7 +154,7 @@ export interface D3ForceCommonOptions
    * <en/> Field or function used for clustering
    * @defaultValue (d) => d.cluster
    */
-  clusterBy?: (d: NodeDatum) => string | number;
+  clusterBy?: Expr | ((node: NodeDatum) => string | number);
   /**
    * <zh/> 聚类内节点之间的作用力强度
    *
@@ -257,7 +242,7 @@ export interface D3ForceCommonOptions
    * <en/> Set the function for generating random numbers
    * @returns <zh/> 随机数 | <en/> Random number
    */
-  randomSource?: () => number;
+  randomSource?: Expr | (() => number);
   /**
    * <zh/> 碰撞力
    *
@@ -360,9 +345,11 @@ export interface D3ForceLayoutOptions extends D3ForceCommonOptions {
     | {
         strength?:
           | number
+          | Expr
           | ((node: NodeDatum, index: number, nodes: NodeDatum[]) => number);
         radius?:
           | number
+          | Expr
           | ((node: NodeDatum, index: number, nodes: NodeDatum[]) => number);
         x?: number;
         y?: number;

package/src/algorithm/d3-force-3d/index.ts

@@ -49,7 +49,7 @@ export class D3Force3DLayout extends D3ForceLayout<
     return {
       numDimensions: 3,
       link: {
-        id: (edge) => String(edge.id),
+        id: (edge) => edge.id!,
       },
       manyBody: {},
       center: {

package/src/algorithm/d3-force-3d/types.ts

@@ -1,3 +1,4 @@
+import type { Expr } from '../../types';
 import type {
   D3ForceCommonOptions,
   EdgeDatum as _EdgeDatum,
@@ -32,9 +33,11 @@ export interface D3Force3DLayoutOptions extends D3ForceCommonOptions {
     | {
         strength?:
           | number
+          | Expr
           | ((node: NodeDatum, index: number, nodes: NodeDatum[]) => number);
         radius?:
           | number
+          | Expr
           | ((node: NodeDatum, index: number, nodes: NodeDatum[]) => number);
         x?: number;
         y?: number;
@@ -50,9 +53,11 @@ export interface D3Force3DLayoutOptions extends D3ForceCommonOptions {
     | {
         strength?:
           | number
+          | Expr
           | ((node: NodeDatum, index: number, nodes: NodeDatum[]) => number);
         z?:
           | number
+          | Expr
           | ((node: NodeDatum, index: number, nodes: NodeDatum[]) => number);
       };
 }