配置指南

自定义节点

使用统一 register 和函数式 NodeExtension 扩展节点表现形式

在 GitHub 查看源码

G6Lite 推荐通过统一的 register() 注册函数式节点扩展，不要求继承引擎内部基类。

import { register, type NodeExtension } from '@antv/g6-lite';

const statusNode: NodeExtension = {
  base: 'rect',
  style: { width: 96, height: 34, borderRadius: 8 },
  getStyle(node) {
    return node.data?.status === 'error'
      ? { fill: '#fff2f0', stroke: '#ff4d4f' }
      : { fill: '#e6f4ff', stroke: '#1677ff' };
  },
};

register('node', 'status-node', statusNode);

适用场景

需要复用一类业务节点视觉。
需要在 WebGL 节点之外增加轻量 overlay。
需要对节点样式或动画做统一封装。

内置扩展

breathing-node 已由 G6Lite 内置注册，可以直接在配置中使用：

const graph = new Graph({
  node: { type: 'breathing-node' },
});

具体可参考：

src/extensions/node.ts
playground/demos/breathing-node.ts

注意事项

自定义节点应避免破坏 WebGL 批量渲染优势。
大图中不要给所有节点叠加昂贵的自定义绘制。
如果只是颜色、尺寸、描边、标签变化，优先使用 node.style 和 stateStyles。
BaseNode 与 registerNode 仅用于 beta 兼容，新增扩展应使用 register('node', ...)。

更多类型见 API 总览。

扩展体系

通过配置、函数式映射和公开扩展 API 完成受控业务定制

自定义 Label Renderer

自定义节点和边的 Label 内容，并复用定位、旋转、碰撞与调度能力

目录

适用场景内置扩展注意事项