图的元素 - Node

通用属性

interface Config {
  id: string    // 唯一
  x?: number    // x坐标
  y?: number    // y坐标
  type?: string // 节点类型，支持 内置 Node 类型 或 自定义 Node, 默认 'circle'
  size?: number | [number, number]
  anchorPoints?: [number, number] | [number, number][] // 接入结点的连接点位置(相对节点), 如 [0, 0] 表示左上锚点，[1,1]表示右下锚点
  style?: Style,  // 参见 Shape 通用属性
  label? string,  // 文本
  labelCfg?: {
    position?: 'center' | 'top' | 'left' | 'right' | 'bottom' // 默认 'center'
    offset?: number // 文本偏移
    style?: LabelStyle // 参见 Shape 通用属性
  }
}

/**
 * 连接点位置，与节点与节点连接的边接入相关
 * x 和 y 方向上范围都是[0,1]，如左上角 [0, 0], 右中间 [1, 0.5]
 * 相关边可以分别选择连入起始点和结束点，通过 `sourceAnchor` 和 `targetAnchor` 进行配置，值为对应 `anchorPoints` 中的索引
 * @see https://g6.antv.antgroup.com/manual/middle/elements/nodes/anchorpoint
 */
type AnchorPoint = [number, number] | [number, number][];
/**
 * 指定节点四个方向上的小圆点是否展示
 * 与AnchorPoint无关，不影响边接入的位置，
 */
interface LinkPoints {
  top?: boolean;
  right?: boolean;
  bottom?: boolean;
  left?: boolean;
  size?: number;
  lineWidth?: number;
  fill?: string;
  stroke?: string;
  r?: number;
  [key: string]: any;
}

配置 Node

// 配置默认节点，其配置内容会被 data 中数据替换
const graph = new G6.Graph({
  container: 'demo', width: 800, height: 600
  defaultNode: { type: 'rect', size: [30, 10], color: 'red' } // 默认节点，仅包含部分配置项
})

// 数据中进行配置, 优先级高于 `defaultNode` 且配置项完整
const data = {
  nodes: [{ id: 'demo', type: 'rect', }]
}
graph.data(data)

// 通过方法包装，优先级最高，将覆盖已有的node配置
// 该方法需要在 `.render()` 之前调用；该方法在增加元素、更新元素时会被调用
graph.node(node => ({
  id: node.id,
  type: 'rect',
  // ...
}))
graph.render()

内置 Node

类型	图形	size 属性配置	其他属性或补充说明
circle	圆	`d: number` 直径	`icon: Icon`
rect	矩形	`[x: number, y: number]`	-
ellipse	椭圆	`[x: number, y: number]`	`icon: Icon`
diamond	菱形	`[x: number, y: number]`	`icon: Icon`
triangle	三角	`[l: number, h: number]`	`icon: Icon`、`direction: Direction`; label 位置默认下方
star	星形	`s: number`	`icon: Icon`、`innerR: number`-内环大小(默认 `size*3/8`)
image	图片	`[w: number, h: number]`	`img: string`、`clipCfg: ClipCfg`; label 位置默认下方
modelRect	卡片	`[w: number, h: number]`	`preRect: PreRect`、`logoIcon: LogoIcon`、`stateIcon: StateIcon`、`description: string`、`descriptionCfg: DescriptionCfg`
dount	环	`d: number` 直径	`donutAttrs`、`donutColorMap`、`icon`; 经测试(v4.8)，表现同 'circle'，配置未生效，且缺少 .d.ts 声明

// Icon 展示及配置，type 为 `rect`、`img`、`modelRect` 不生效
interface Icon {
  show?: boolean; // 默认 false
  img?: string;
  text?: string; // 优先级高于 img
  width?: number;
  height?: number;
  offset?: number;
}
// 三角形朝向，type 为 'triangle' 时生效
type Direction = "up" | "down" | "left" | "right";

// 图片裁剪配置，type 为 'image' 时生效
interface ClipCfg {
  show?: boolean; // 默认 false
  type?: "circle" | "rect" | "ellipse"; // 裁剪的形状
  x?: number; // 裁剪的 x 坐标
  y?: number; // 裁剪的 y 坐标
  width?: number; // type 为 'rect' 时生效
  height?: number; // type 为 'rect' 时生效
  r?: number; // type 为 'circle' 时生效
  rx?: number; // type 为 'ellipse' 时生效
  ry?: number; // type 为 'ellipse' 时生效
  points?: number[][];
  path?: Array<Array<string | number>>;
}
/**
 * 卡片相关配置，包括
 * - PreRect-左侧矩形
 * - LogoIcon-左侧logo
 * - StateIcon-右侧logo
 * - DescriptionCfg-文本配置
 * NOTE: .d.ts 中缺少具体的类型内容，请参考文档或此处
 */
interface PreRect {
  show?: boolean;
  width?: number; // 默认 4
  fill?: string; // 默认 '#40a9ff'
  radius?: number; // 默认 2
}
type LogoIcon = Omit<Icon, "text">; // 其中 offset 默认 0
type StateIcon = Omit<Icon, "text">; // 其中 offset 默认 -5
interface DescriptionCfg {
  paddingTop?: number;
  position?: "center" | "top" | "left" | "right" | "bottom"; // 默认 'center'
  offset?: number; // 文本偏移
  style?: LabelStyle; // 参见 Shape 通用属性
}

图的元素 - Node ​

通用属性 ​

配置 Node ​

内置 Node ​

图的元素 - Node

通用属性

配置 Node

内置 Node