【无标题】

本文档介绍了如何在一个图形模型中进行节点和边的操作,包括判断是否为节点或边、创建、添加、删除以及各种查询方法,如获取连接的边、邻居节点等。此外,还提到了图的清空、重置、克隆等高级功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Model
阅读时间约 12 分钟
配置
model
画布对应的模型,默认创建一个新模型。

方法
isNode(…)
isNode(cell: Cell): cell is Node
返回指定的 Cell 是否是节点。

参数

名称 类型 必选 默认值 描述
cell Cell ✓ 指定的 Cell。
isEdge(…)
isEdge(cell: Cell): cell is Edge
返回指定的 Cell 是否是边。

参数

名称 类型 必选 默认值 描述
cell Cell ✓ 指定的 Cell。
createNode(…)
createNode(metadata: Node.Metadata): Node
创建节点。

参数

名称 类型 必选 默认值 描述
metadata Node.Metadata ✓ 节点元数据。
addNode(…)
addNode(metadata: Node.Metadata, options?: AddOptions): Node
addNode(node: Node, options?: AddOptions): Node
添加节点到画布,返回添加的节点。

参数

名称 类型 必选 默认值 描述
node Node.Metadata | Node ✓ 节点元数据或节点实例。
options.silent boolean false 为 true 时不触发 ‘node:added’ 和 ‘cell:added’ 事件和画布重绘。
options.sort boolean true 是否按照 zIndex 排序。
options…others object 其他自定义键值对,可以在事件回调中使用。
removeNode(…)
removeNode(nodeId: string, options?: RemoveOptions): Node | null
removeNode(node: Node, options?: RemoveOptions): Node | null
删除节点,返回删除的节点。

参数

名称 类型 必选 默认值 描述
node string | Node ✓ 节点 ID 或节点实例。
options.silent boolean false 为 true 时不触发 ‘node:removed’ 和 ‘cell:removed’ 事件和画布重绘。
options…others object 其他自定义键值对,可以在事件回调中使用。
createEdge(…)
createEdge(metadata: Edge.Metadata): Edge
创建边。

参数

名称 类型 必选 默认值 描述
metadata Edge.Metadata ✓ 节点元数据。
addEdge(…)
addEdge(metadata: Edge.Metadata, options?: AddOptions): Edge
addEdge(edge:Edge, options?: AddOptions): Edge
添加边到画布,返回添加的边。

参数

名称 类型 必选 默认值 描述
edge Edge.Metadata | Edge ✓ 边元数据或边实例。
options.silent boolean false 为 true 时不触发 ‘edge:added’ 和 ‘cell:added’ 事件和画布重绘。
options.sort boolean true 是否按照 zIndex 排序。
options…others object 其他自定义键值对,可以在事件回调中使用。
removeEdge(…)
removeEdge(edgeId: string, options?: RemoveOptions): Edge | null
removeEdge(edge: Edge, options?: RemoveOptions): Edge | null
删除边,返回删除的边。

参数

名称 类型 必选 默认值 描述
edge string | Edge ✓ 边 ID 或边实例。
options.silent boolean false 为 true 时不触发 ‘edge:removed’ 和 ‘cell:removed’ 事件和画布重绘。
options…others object 其他自定义键值对,可以在事件回调中使用。
addCell(…)
addCell(cell: Cell | Cell[], options?: AddOptions): this
添加节点或边到画布。

参数

名称 类型 必选 默认值 描述
cell Cell | Cell[] ✓ 节点实例或边实例,支持传入数组同时添加多个节点或边。
options.silent boolean false 为 true 时不触发 ‘cell:added’、‘node:added’ 和 ‘edge:added’ 事件和画布重绘。
options.sort boolean true 是否按照 zIndex 排序。
options…others object 其他自定义键值对,可以在事件回调中使用。
removeCell(…)
removeCell(cellId: string, options?: RemoveOptions): Cell | null
removeCell(cell: Cell, options?: RemoveOptions): Cell | null
删除节点或边,返回删除的节点或边。

参数

名称 类型 必选 默认值 描述
cell string | Cell ✓ 节点/边 ID 或节点/边的实例。
options.silent boolean false 为 true 时不触发 ‘cell:removed’、‘node:removed’ 和 ‘edge:removed’ 事件和画布重绘。
options…others object 其他自定义键值对,可以在事件回调中使用。
removeCells(…)
removeCells(cells: (Cell | string)[], options?: RemoveOptions): Cell[]
删除多个节点/边,返回删除的节点或边的数组。

参数

名称 类型 必选 默认值 描述
cell (string | Cell)[] ✓ 节点/边 ID 或节点/边数组。
options.silent boolean false 为 true 时不触发 ‘cell:removed’、‘node:removed’ 和 ‘edge:removed’ 事件和画布重绘。
options…others object 其他自定义键值对,可以在事件回调中使用。
removeConnectedEdges(…)
removeConnectedEdges(cell: Cell | string, options?: RemoveOptions): Edge[]
删除连接到节点/边的边,返回被删除边的数组。

参数

名称 类型 必选 默认值 描述
cell string | Cell ✓ 节点/边 ID 或节点/边。
options.silent boolean false 为 true 时不触发 ‘cell:removed’ 和 ‘edge:removed’ 事件和画布重绘。
options…others object 其他自定义键值对,可以在事件回调中使用。
disconnectConnectedEdges(…)
disconnectConnectedEdges(cell: Cell | string, options?: Edge.SetOptions): this
将链接到节点/边的边的起点和终点设置为原点 {x: 0, y: 0},即断开连接。

参数

名称 类型 必选 默认值 描述
cell string | Cell ✓ 节点/边 ID 或节点/边。
options.silent boolean false 为 true 时不触发 ‘edge:change:source’ 和 ‘edge:change:target’ 事件和画布重绘。
options…others object 其他自定义键值对,可以在事件回调中使用。
clearCells(…)
clearCells(options?: SetOptions): this
清空画布。

参数

名称 类型 必选 默认值 描述
options.silent boolean false 为 true 时不触发 ‘cell:removed’、‘node:removed’ 和 ‘edge:removed’ 事件和画布重绘。
options…others object 其他自定义键值对,可以在事件回调中使用。
resetCells(…)
resetCells(cells: Cell[], options?: SetOptions): this
清空画布并添加用指定的节点/边。

参数

名称 类型 必选 默认值 描述
cell Cell[] ✓ 节点/边数组。
options.silent boolean false 为 true 时不触发 ‘cell:added’、‘node:added’、‘edge:added’、‘cell:removed’、‘node:removed’ 和 ‘edge:removed’ 事件和画布重绘。
options…others object 其他自定义键值对,可以在事件回调中使用。
hasCell(…)
hasCell(cellId: string): boolean
hasCell(cell: Cell): boolean
返回画布中是否包含指定的节点/边。

参数

名称 类型 必选 默认值 描述
cell string | Cell ✓ 节点/边 ID 或节点/边。
getCellById(…)
getCellById(id: string)
根据节点/边的 ID 获取节点/边。

参数

名称 类型 必选 默认值 描述
cell string ✓ 节点/边的 ID。
updateCellId(…)
updateCellId(cell: Cell, newId: string)
更新节点或者边的 ID,会返回新创建的节点/边。

参数

名称 类型 必选 默认值 描述
cell Cell ✓ 节点/边。
newId string ✓ 新的 ID。
getCells()
getCells(): Cell[]
返回画布中所有节点和边。

getCellCount()
getCellCount(): number
返回画布中所有节点和边的数量。

getNodes()
getNodes(): Node[]
返回画布中所有节点。

getEdges()
getEdges(): Edge[]
返回画布中所有边。

getOutgoingEdges(…)
getOutgoingEdges(cell: Cell | string): Edge[] | null
获取连接到节点/边的输出边,即边的起点为指定节点/边的边。

参数

名称 类型 必选 默认值 描述
cell string | Cell ✓ 节点/边 ID 或节点/边。
getIncomingEdges(…)
getIncomingEdges(cell: Cell | string): Edge[] | null
获取连接到节点/边的输入边,即边的终点为指定节点/边的边。

参数

名称 类型 必选 默认值 描述
cell string | Cell ✓ 节点/边 ID 或节点/边。
getConnectedEdges(…)
getConnectedEdges(cell: Cell | string, options?: GetConnectedEdgesOptions): Edge[]
获取与节点/边相连接的边。

参数

名称 类型 必选 默认值 描述
cell string | Cell ✓ 节点/边 ID 或节点/边。
options.incoming boolean - 是否包含输入边,默认返回所有输入和输出边,incoming 和 outgoing 两个选项中,当 incoming 为 true 时只返回输入边。
options.outgoing boolean - 是否包含输出边,默认返回所有输入和输出边,incoming 和 outgoing 两个选项中,当 outgoing 为 true 时只返回输出边。
options.deep boolean false 是否递归获取所有子节点/边,为 true 时将同时返回链接到所有子孙节点/边的边。
options.enclosed boolean false 是否包含子孙节点之间相连接的边。
options.indirect boolean false 是否包含哪些间接连接的边,即连接到输入或输出边上的边。
使用

const edges = graph.getConnectedEdges(node) // 返回输入和输出边
const edges = graph.getConnectedEdges(node, { incoming: true, outgoing: true }) // 返回输入和输出边

const edges = graph.getConnectedEdges(node, { incoming: true }) // 返回输入边
const edges = graph.getConnectedEdges(node, { incoming: true, outgoing: false }) // 返回输入边

const edges = graph.getConnectedEdges(node, { outgoing: true }) // 返回输出边
const edges = graph.getConnectedEdges(node, { incoming:false, outgoing: true }) // 返回输出边

const edges = graph.getConnectedEdges(node, { deep: true }) // 返回输入和输出边,包含链接到所有子孙节点/边的输入和输出边
const edges = graph.getConnectedEdges(node, { deep: true, incoming: true }) // 返回输入边,包含链接到所有子孙节点/边的输入边
const edges = graph.getConnectedEdges(node, { deep: true, enclosed: true }) // 返回输入和输出边,同时包含子孙节点/边之间相连的边

const edges = graph.getConnectedEdges(node, { indirect: true }) // 返回输入和输出边,包含间接连接的边
getRootNodes()
getRootNodes(): Node[]
获取所有根节点,即没有输入边的节点。

isRootNode(…)
isRootNode(cell: Cell | string): boolean
返回指定的节点是否是根节点。

参数

名称 类型 必选 默认值 描述
cell string | Cell ✓ 节点/边 ID 或节点/边。
getLeafNodes()
getLeafNodes(): Node[]
返回所有叶子节点,即没有输出边的节点。

isLeafNode(…)
isLeafNode(cell: Cell | string): boolean
参数

名称 类型 必选 默认值 描述
cell string | Cell ✓ 节点/边 ID 或节点/边。
getNeighbors(…)
getNeighbors(cell: Cell, options?: GetNeighborsOptions): Cell[]
获取邻居节点。

参数

名称 类型 必选 默认值 描述
cell Cell ✓ 节点/边。
options.incoming boolean - 是否包含输入侧的邻居节点,默认包含输入和输出侧的节点,incoming 和 outgoing 两个选项中,当 incoming 为 true 时只返回输入侧的节点。
options.outgoing boolean - 是否包含输出侧的邻居节点,默认包含输入和输出侧的节点,incoming 和 outgoing 两个选项中,当 outgoing 为 true 时只返回输出侧的节点。
options.deep boolean false 是否递归获取所有子节点/边,为 true 时将同时返回所有子孙节点/边的邻居节点。
options.indirect boolean false 是否包含哪些间接连接的邻居节点,即中间包含多条边(边与边连接)的邻居。
isNeighbor(…)
isNeighbor(cell1: Cell, cell2: Cell, options?: GetNeighborsOptions): boolean
返回 cell2 是否是 cell1 的邻居, 其中 options 选项与 getNeighbors(…) 方法的选项一致。

getPredecessors(…)
getPredecessors(cell: Cell, options?: GetPredecessorsOptions): Cell[]
返回节点的前序节点,即从根节点开始连接到指定节点的节点。

参数

名称 类型 必选 默认值 描述
cell Cell ✓ 节点/边。
options.breadthFirst boolean false 是否使用广度优先搜索算法,默认使用深度优先搜索算法。
options.deep boolean false 是否递归获取所有子节点/边,为 true 时将同时返回所有子孙节点/边的前序节点。
options.distance number | number[] | ((distance: number) => boolean) - 距获取指定距离的前序节点,节点和节点之间相隔的边的数量为 1 个距离单位。
isPredecessor(…)
isPredecessor(cell1: Cell, cell2: Cell, options?: GetPredecessorsOptions): boolean
返回 cell2 是否是 cell1 的前序节点,其中 options 选项与 getPredecessors(…) 方法的选项一致。

参数

getSuccessors(…)
getSuccessors(cell: Cell, options?: GetPredecessorsOptions): Cell[]
获取所有后续节点,即从指定节点开始连接到叶子节点的节点。其中 options 选项与 getPredecessors(…) 方法的选项一致。

isSuccessor(…)
isSuccessor(cell1: Cell, cell2: Cell, options?: GetPredecessorsOptions): boolean
返回 cell2 是否是 cell1 的后续节点,其中 options 选项与 getPredecessors(…) 方法的选项一致。

getCommonAncestor(…)
getCommonAncestor(…cells: {Cell | Cell[])[]): Cell | null
获取指定节点的共同祖先节点。

getSubGraph(…)
getSubGraph(cells: Cell[], options?: GetSubgraphOptions): Cell[]
返回指定节点和边构成的子图。通过遍历指定的 cells 数组,当遇到边时,同时包含边的起始和终止节点;当遇到节点时,如果与节点相连的边的两端的节点都在 cells 数组中,则同时包含该条边。

参数

名称 类型 必选 默认值 描述
cells Cell[] ✓ 节点/边数组。
options.deep boolean false 是否递归获取所有子节点/边。
cloneCells(…)
cloneCells(cells: Cell[]): { [oldCellId: string]: Cell }
克隆,返回旧节点/边 ID 和克隆后节点/边的键值对。

cloneSubGraph(…)
cloneSubGraph(cells: Cell[], options?: GetSubgraphOptions): { [oldCellId: string]: Cell }
获取子图并克隆。其中 options 选项与 getSubGraph(…) 方法的选项一致。

getNodesFromPoint(…)
getNodesFromPoint(x: number, y: number): Node[]
getNodesFromPoint(p: Point.PointLike): Node[]
返回指定位置的节点,即返回节点的矩形区域包含了指定点的节点。

getNodesInArea(…)
getNodesInArea(
x: number,
y: number,
w: number,
h: number,
options?: Model.GetCellsInAreaOptions,
): Node[]
getNodesInArea(
rect: Rectangle.RectangleLike,
options?: Model.GetCellsInAreaOptions,
): Node[]
返回指定矩形区域的节点,当 options.strict 为 true 时,要求节点的矩形区域完全包含指定的矩形,否则只需要相交即可。

getNodesUnderNode(…)
getNodesUnderNode(
node: Node,
options?: {
by?: ‘bbox’ | Rectangle.KeyPoint
},
): Node[]
返回与指定节点位置的节点,通过 options.by 选项来指定获取方式,包含:

null 或 bbox:返回与指定的节点矩形区域相交的节点
Rectangle.KeyPoint:返回包含矩形的某个关键点的节点,其中 Rectangle.KeyPoint 的取值为:

“center”
“origin”
“corner”
“topLeft”
“topCenter”
“topRight”
“bottomLeft”
“bottomCenter”
“bottomRight”
“leftMiddle”
“rightMiddle”
searchCell(…)
searchCell(cell: Cell, iterator: SearchIterator, options?: SearchOptions): this
从指定的节点/边开始进行遍历。

参数

名称 类型 必选 默认值 描述
cell Cell ✓ 节点/边。
iterator (cell: Cell, distance: number) => any ✓ 遍历方法。
options.breadthFirst boolean false 是否使用广度优先搜索算法,默认使用深度优先搜索算法。
options.incoming boolean - 是否遍历输入侧的邻居节点,默认遍历输入和输出侧的节点,incoming 和 outgoing 两个选项中,当 incoming 为 true 时只遍历输入侧的节点。
options.outgoing boolean - 是否遍历输出侧的邻居节点,默认遍历输入和输出侧的节点,incoming 和 outgoing 两个选项中,当 outgoing 为 true 时只遍历输出侧的节点。
options.deep boolean false 是否递归遍历所有子节点/边,为 true 时将同时遍历所有子孙节点/边的邻居节点。
options.indirect boolean false 是否遍历哪些间接连接的邻居节点,即中间包含多条边(边与边连接)的邻居。
getShortestPath(…)
getShortestPath(
source: Cell | string,
target: Cell | string,
options?: GetShortestPathOptions,
): string[]
获取节点之间的最短路径,返回最短路径上的节点 ID。

参数

名称 类型 必选 默认值 描述
source Cell | string ✓ 起始节点/边。
source Cell | string ✓ 终止节点/边。
options.directed boolean false 是否考虑方向性,为 true 时需要路径沿开始节点到终止节点的方向。
options.weight (u: string, v: string) => number (u, v) => 1 距离权重算法,u 和 v 为相邻的两个节点,默认距离为 1。
getAllCellsBBox(…)
getAllCellsBBox(): Rectangle | null
返回画布上所有节点和边的矩形区域。

getCellsBBox(…)
getCellsBBox(cells: Cell[], options?: Cell.GetCellsBBoxOptions): Rectangle | null
返回指定节点和边构成的矩形区域。

参数

名称 类型 必选 默认值 描述
cells Cell[] ✓ 节点和边数组。
options.deep boolean false 是否包含所有子孙节点和边。
toJSON(…)
toJSON(options?: ToJSONOptions): object
导出图中的节点和边,返回一个具有 { cells: [] } 结构的对象,其中 cells 数组按渲染顺序保存节点和边。

参数

名称 类型 必选 默认值 描述
options.deep diff false 是否导出节点和边的差异数据(与节点和边的默认配置不同的部分)。
parseJSON(…)
将指定的数据转换为节点和边。

支持节点/边元数据数组,按照数组顺序返回创建的节点和边。

parseJSON(cells: (Node.Metadata | Edge.Metadata)[]): (Node | Edge)[]
或者提供一个包含 cells、nodes、edges 的对象,按照 […cells, …nodes, …edges] 顺序创建节点和边并返回。

parseJSON({
cells?: (Node.Metadata | Edge.Metadata)[],
nodes?: Node.Metadata[],
edges?: Edge.Metadata[],
}): (Node | Edge)[]
fromJSON(…)
按照指定的 JSON 数据渲染节点和边。

支持节点/边元数据数组,按照数组顺序渲染节点和边。

fromJSON(data: (Node.Metadata | Edge.Metadata)[], options?: FromJSONOptions): this
或者提供一个包含 cells、nodes、edges 的对象,按照 […cells, …nodes, …edges] 顺序渲染。

fromJSON(
data: {
cells?: (Node.Metadata | Edge.Metadata)[],
nodes?: Node.Metadata[],
edges?: Edge.Metadata[],
},
options?: FromJSONOptions,
): this
当 options.slient 为 true 时,不触发 cell:added、node:added 和 edge:added 事件和画布重绘。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值