logoCreated with Sketch.

X6

Model

13 min read

配置

model

画布对应的模型，默认创建一个新模型。

方法

isNode(...)

isNode(cell: Cell): cell is Node

返回指定的 Cell 是否是节点。

参数

名称类型必选默认值描述
cellCell✓指定的 Cell。

isEdge(...)

isEdge(cell: Cell): cell is Edge

返回指定的 Cell 是否是边。

参数

名称类型必选默认值描述
cellCell✓指定的 Cell。

createNode(...)

createNode(metadata: Node.Metadata): Node

创建节点。

参数

名称类型必选默认值描述
metadataNode.Metadata✓节点元数据。

addNode(...)

addNode(metadata: Node.Metadata, options?: AddOptions): Node
addNode(node: Node, options?: AddOptions): Node

添加节点到画布，返回添加的节点。

参数

名称类型必选默认值描述
nodeNode.Metadata | Node✓节点元数据或节点实例。
options.silentbooleanfalse为 true 时不触发 'node:added' 和 'cell:added' 事件和画布重绘。
options.sortbooleantrue是否按照 zIndex 排序。
options...othersobject其他自定义键值对，可以在事件回调中使用。

addNodes(...)

addNodes(nodes: (Node.Metadata | Node)[], options?: AddOptions): Graph

添加多个节点到画布，返回该画布。批量添加节点的时候，推荐使用这个方法，相比多次 addNode，它具备更好的性能。

参数

名称类型必选默认值描述
nodes(Node.Metadata | Node)[]✓节点元数据或节点实例数组。
options.silentbooleanfalse为 true 时不触发 'node:added' 和 'cell:added' 事件和画布重绘。
options.sortbooleantrue是否按照 zIndex 排序。
options...othersobject其他自定义键值对，可以在事件回调中使用。

removeNode(...)

removeNode(nodeId: string, options?: RemoveOptions): Node | null
removeNode(node: Node, options?: RemoveOptions): Node | null

删除节点，返回删除的节点。

参数

名称类型必选默认值描述
nodestring | Node✓节点 ID 或节点实例。
options.silentbooleanfalse为 true 时不触发 'node:removed' 和 'cell:removed' 事件和画布重绘。
options...othersobject其他自定义键值对，可以在事件回调中使用。

createEdge(...)

createEdge(metadata: Edge.Metadata): Edge

创建边。

参数

名称类型必选默认值描述
metadataEdge.Metadata✓节点元数据。

addEdge(...)

addEdge(metadata: Edge.Metadata, options?: AddOptions): Edge
addEdge(edge:Edge, options?: AddOptions): Edge

添加边到画布，返回添加的边。

参数

名称类型必选默认值描述
edgeEdge.Metadata | Edge✓边元数据或边实例。
options.silentbooleanfalse为 true 时不触发 'edge:added' 和 'cell:added' 事件和画布重绘。
options.sortbooleantrue是否按照 zIndex 排序。
options...othersobject其他自定义键值对，可以在事件回调中使用。

addEdges(...)

addEdges(edges: (Edge.Metadata | Edge)[], options?: AddOptions): Graph

添加多条边到画布，返回该画布。

参数

名称类型必选默认值描述
edges(Edge.Metadata | Edge)[]✓边元数据或边实例数组。
options.silentbooleanfalse为 true 时不触发 'edge:added' 和 'cell:added' 事件和画布重绘。
options.sortbooleantrue是否按照 zIndex 排序。
options...othersobject其他自定义键值对，可以在事件回调中使用。

removeEdge(...)

removeEdge(edgeId: string, options?: RemoveOptions): Edge | null
removeEdge(edge: Edge, options?: RemoveOptions): Edge | null

删除边，返回删除的边。

参数

名称类型必选默认值描述
edgestring | Edge✓边 ID 或边实例。
options.silentbooleanfalse为 true 时不触发 'edge:removed' 和 'cell:removed' 事件和画布重绘。
options...othersobject其他自定义键值对，可以在事件回调中使用。

addCell(...)

addCell(cell: Cell | Cell[], options?: AddOptions): this

添加节点或边到画布。

参数

名称类型必选默认值描述
cellCell | Cell[]✓节点实例或边实例，支持传入数组同时添加多个节点或边。
options.silentbooleanfalse为 true 时不触发 'cell:added'、'node:added' 和 'edge:added' 事件和画布重绘。
options.sortbooleantrue是否按照 zIndex 排序。
options...othersobject其他自定义键值对，可以在事件回调中使用。

addCells(...)

addCells(cells: Cell[], options?: AddOptions): this

添加多个节点或边到画布。

参数

名称类型必选默认值描述
cellsCell[]✓节点实例或边实例的数组。
options.silentbooleanfalse为 true 时不触发 'cell:added'、'node:added' 和 'edge:added' 事件和画布重绘。
options.sortbooleantrue是否按照 zIndex 排序。
options...othersobject其他自定义键值对，可以在事件回调中使用。

removeCell(...)

removeCell(cellId: string, options?: RemoveOptions): Cell | null
removeCell(cell: Cell, options?: RemoveOptions): Cell | null

删除节点或边，返回删除的节点或边。

参数

名称类型必选默认值描述
cellstring | Cell✓节点/边 ID 或节点/边的实例。
options.silentbooleanfalse为 true 时不触发 'cell:removed'、'node:removed' 和 'edge:removed' 事件和画布重绘。
options...othersobject其他自定义键值对，可以在事件回调中使用。

removeCells(...)

removeCells(cells: (Cell | string)[], options?: RemoveOptions): Cell[]

删除多个节点/边，返回删除的节点或边的数组。

参数

名称类型必选默认值描述
cell(string | Cell)[]✓节点/边 ID 或节点/边数组。
options.silentbooleanfalse为 true 时不触发 'cell:removed'、'node:removed' 和 'edge:removed' 事件和画布重绘。
options...othersobject其他自定义键值对，可以在事件回调中使用。

removeConnectedEdges(...)

removeConnectedEdges(cell: Cell | string, options?: RemoveOptions): Edge[]

删除连接到节点/边的边，返回被删除边的数组。

参数

名称类型必选默认值描述
cellstring | Cell✓节点/边 ID 或节点/边。
options.silentbooleanfalse为 true 时不触发 'cell:removed' 和 'edge:removed' 事件和画布重绘。
options...othersobject其他自定义键值对，可以在事件回调中使用。

disconnectConnectedEdges(...)

disconnectConnectedEdges(cell: Cell | string, options?: Edge.SetOptions): this

将链接到节点/边的边的起点和终点设置为原点 {x: 0, y: 0}，即断开连接。

参数

名称类型必选默认值描述
cellstring | Cell✓节点/边 ID 或节点/边。
options.silentbooleanfalse为 true 时不触发 'edge:change:source' 和 'edge:change:target' 事件和画布重绘。
options...othersobject其他自定义键值对，可以在事件回调中使用。

clearCells(...)

clearCells(options?: SetOptions): this

清空画布。

参数

名称类型必选默认值描述
options.silentbooleanfalse为 true 时不触发 'cell:removed'、'node:removed' 和 'edge:removed' 事件和画布重绘。
options...othersobject其他自定义键值对，可以在事件回调中使用。

resetCells(...)

resetCells(cells: Cell[], options?: SetOptions): this

清空画布并添加用指定的节点/边。

参数

名称类型必选默认值描述
cellCell[]✓节点/边数组。
options.silentbooleanfalse为 true 时不触发 'cell:added'、'node:added'、'edge:added'、'cell:removed'、'node:removed' 和 'edge:removed' 事件和画布重绘。
options...othersobject其他自定义键值对，可以在事件回调中使用。

hasCell(...)

hasCell(cellId: string): boolean
hasCell(cell: Cell): boolean

返回画布中是否包含指定的节点/边。

参数

名称类型必选默认值描述
cellstring | Cell✓节点/边 ID 或节点/边。

getCellById(...)

getCellById(id: string)

根据节点/边的 ID 获取节点/边。

参数

名称类型必选默认值描述
cellstring✓节点/边的 ID。

updateCellId(...)

updateCellId(cell: Cell, newId: string)

更新节点或者边的 ID，会返回新创建的节点/边。

参数

名称类型必选默认值描述
cellCell✓节点/边。
newIdstring✓新的 ID。

getCells()

getCells(): Cell[]

返回画布中所有节点和边。

getCellCount()

getCellCount(): number

返回画布中所有节点和边的数量。

getNodes()

getNodes(): Node[]

返回画布中所有节点。

getEdges()

getEdges(): Edge[]

返回画布中所有边。

getOutgoingEdges(...)

getOutgoingEdges(cell: Cell | string): Edge[] | null

获取连接到节点/边的输出边，即边的起点为指定节点/边的边。

参数

名称类型必选默认值描述
cellstring | Cell✓节点/边 ID 或节点/边。

getIncomingEdges(...)

getIncomingEdges(cell: Cell | string): Edge[] | null

获取连接到节点/边的输入边，即边的终点为指定节点/边的边。

参数

名称类型必选默认值描述
cellstring | Cell✓节点/边 ID 或节点/边。

getConnectedEdges(...)

getConnectedEdges(cell: Cell | string, options?: GetConnectedEdgesOptions): Edge[]

获取与节点/边相连接的边。

参数

名称类型必选默认值描述
cellstring | Cell✓节点/边 ID 或节点/边。
options.incomingboolean-是否包含输入边，默认返回所有输入和输出边，incoming 和 outgoing 两个选项中，当 incoming 为 true 时只返回输入边。
options.outgoingboolean-是否包含输出边，默认返回所有输入和输出边，incoming 和 outgoing 两个选项中，当 outgoing 为 true 时只返回输出边。
options.deepbooleanfalse是否递归获取所有子节点/边，为 true 时将同时返回链接到所有子孙节点/边的边。
options.enclosedbooleanfalse是否包含子孙节点之间相连接的边。
options.indirectbooleanfalse是否包含哪些间接连接的边，即连接到输入或输出边上的边。

使用

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

返回指定的节点是否是根节点。

参数

名称类型必选默认值描述
cellstring | Cell✓节点/边 ID 或节点/边。

getLeafNodes()

getLeafNodes(): Node[]

返回所有叶子节点，即没有输出边的节点。

isLeafNode(...)

isLeafNode(cell: Cell | string): boolean

返回指定的节点是否是叶子节点

参数

名称类型必选默认值描述
cellstring | Cell✓节点/边 ID 或节点/边。

getNeighbors(...)

getNeighbors(cell: Cell, options?: GetNeighborsOptions): Cell[]

获取邻居节点。

参数

名称类型必选默认值描述
cellCell✓节点/边。
options.incomingboolean-是否包含输入侧的邻居节点，默认包含输入和输出侧的节点，incoming 和 outgoing 两个选项中，当 incoming 为 true 时只返回输入侧的节点。
options.outgoingboolean-是否包含输出侧的邻居节点，默认包含输入和输出侧的节点，incoming 和 outgoing 两个选项中，当 outgoing 为 true 时只返回输出侧的节点。
options.deepbooleanfalse是否递归获取所有子节点/边，为 true 时将同时返回所有子孙节点/边的邻居节点。
options.indirectbooleanfalse是否包含哪些间接连接的邻居节点，即中间包含多条边(边与边连接)的邻居。

isNeighbor(...)

isNeighbor(cell1: Cell, cell2: Cell, options?: GetNeighborsOptions): boolean

返回 cell2 是否是 cell1 的邻居， 其中 options 选项与 getNeighbors(...) 方法的选项一致。

getPredecessors(...)

getPredecessors(cell: Cell, options?: GetPredecessorsOptions): Cell[]

返回节点的前序节点，即从根节点开始连接到指定节点的节点。

参数

名称类型必选默认值描述
cellCell✓节点/边。
options.breadthFirstbooleanfalse是否使用广度优先搜索算法，默认使用深度优先搜索算法。
options.deepbooleanfalse是否递归获取所有子节点/边，为 true 时将同时返回所有子孙节点/边的前序节点。
options.distancenumber | 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 数组中，则同时包含该条边。

参数

名称类型必选默认值描述
cellsCell[]✓节点/边数组。
options.deepbooleanfalse是否递归获取所有子节点/边。

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

从指定的节点/边开始进行遍历。

参数

名称类型必选默认值描述
cellCell✓节点/边。
iterator(cell: Cell, distance: number) => any✓遍历方法。
options.breadthFirstbooleanfalse是否使用广度优先搜索算法，默认使用深度优先搜索算法。
options.incomingboolean-是否遍历输入侧的邻居节点，默认遍历输入和输出侧的节点，incoming 和 outgoing 两个选项中，当 incoming 为 true 时只遍历输入侧的节点。
options.outgoingboolean-是否遍历输出侧的邻居节点，默认遍历输入和输出侧的节点，incoming 和 outgoing 两个选项中，当 outgoing 为 true 时只遍历输出侧的节点。
options.deepbooleanfalse是否递归遍历所有子节点/边，为 true 时将同时遍历所有子孙节点/边的邻居节点。
options.indirectbooleanfalse是否遍历哪些间接连接的邻居节点，即中间包含多条边(边与边连接)的邻居。

getShortestPath(...)

getShortestPath(
  source: Cell | string,
  target: Cell | string,
  options?: GetShortestPathOptions,
): string[]

获取节点之间的最短路径，返回最短路径上的节点 ID。

参数

名称类型必选默认值描述
sourceCell | string✓起始节点/边。
sourceCell | string✓终止节点/边。
options.directedbooleanfalse是否考虑方向性，为 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

返回指定节点和边构成的矩形区域。

参数

名称类型必选默认值描述
cellsCell[]✓节点和边数组。
options.deepbooleanfalse是否包含所有子孙节点和边。

toJSON(...)

toJSON(options?: ToJSONOptions): object

导出图中的节点和边，返回一个具有 { cells: [] } 结构的对象，其中 cells 数组按渲染顺序保存节点和边。

参数

名称类型必选默认值描述
options.deepdifffalse是否导出节点和边的差异数据（与节点和边的默认配置不同的部分）。

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.silent 为 true 时，不触发 cell:added、node:added 和 edge:added 事件和画布重绘。