9.7 KiB
title | order |
---|---|
元素操作 | 4 |
增删
graph.addItem(type, model, stack)
新增元素(节点,边,或节点分组)。
⚠️ 注意: 将会直接使用 model
对象作为新增元素的数据模型,G6 内部可能会对其增加或修改一些必要的字段。若不希望原始参数被修改,建议在使用深拷贝后的 model
。
参数
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
type | string | true | 元素类型,可选值为 'node' 、'edge' 和 'group' |
model | Object | true | 元素的数据模型,具体内容参见元素配置项。type: 'group' 时,参看 手动创建节点分组文档 |
stack | boolean | false | 操作是否入 undo & redo 栈,当实例化 Graph 时设置 enableStack 为 true 时,默认情况下会自动入栈,入栈以后,就支持 undo & redo 操作,如果不需要,则设置该参数为 false 即可 |
用法
const model = {
id: 'node',
label: 'node',
address: 'cq',
x: 200,
y: 150,
style: {
fill: 'blue',
},
};
graph.addItem('node', model);
// 当 type 为 'group' 时候,model 的数据结构如下:
const model = {
groupId: 'xxx000999',
nodes: ['123', '23'],
type: 'rect',
zIndex: 0,
title: {
text: '名称',
},
};
graph.addItem('group', model);
graph.removeItem(item, stack)
删除元素,当 item 为 group ID 时候,则删除分组。
参数
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
item | string / Object | true | 元素 ID 或元素实例 |
stack | boolean | false | 操作是否入 undo & redo 栈,当实例化 Graph 时设置 enableStack 为 true 时,默认情况下会自动入栈,入栈以后,就支持 undo & redo 操作,如果不需要,则设置该参数为 false 即可 |
用法
// 通过 ID 查询节点实例
const item = graph.findById('node');
graph.removeItem(item);
// 该操作不会进入到 undo & redo 栈,即 redo & undo 操作会忽略该操作
graph.removeItem(item, false);
更新
graph.updateItem(item, model, stack)
更新元素,包括更新数据、样式等。若图上有 combo,使用该函数更新一个节点位置后,需要调用 updateCombo(combo) 以更新相关 combo 的位置。
参数
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
item | string / Object | true | 元素 ID 或元素实例 |
cfg | Object | false | 需要更新的数据模型,具体内容参见元素配置项 |
stack | boolean | false | 操作是否入 undo & redo 栈,当实例化 Graph 时设置 enableStack 为 true 时,默认情况下会自动入栈,入栈以后,就支持 undo & redo 操作,如果不需要,则设置该参数为 false 即可 |
用法
const model = {
id: 'node',
label: 'node',
address: 'cq',
x: 200,
y: 150,
style: {
fill: 'blue',
},
};
// 通过 ID 查询节点实例
const item = graph.findById('node');
graph.updateItem(item, model);
graph.refreshItem(item)
刷新指定元素。
参数
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
item | string / Object | true | 元素 ID 或元素实例 |
用法
// 通过 ID 查询节点实例
const item = graph.findById('node');
graph.refreshItem(item);
graph.refreshPositions()
当节点位置发生变化时,刷新所有节点位置,并重计算边的位置。
该方法无参数。
用法
graph.refreshPositions();
graph.updateCombos()
根据子元素(子节点与子 combo)的 bbox 更新所有 combos 的绘制,包括 combos 的位置和范围。
用法
// 更新所有 combos
graph.updateCombos();
graph.updateCombo(combo)
仅更新 combo 及其所有祖先 combo。建议在使用 graph.updateItem 来更新节点位置时,调用该方法以更新节点的祖先 combos。
参数
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
combo | string / ICombo | true | Combo ID 或 Combo 实例 |
用法
// 更新了某个节点的位置
const node1 = graph.findById('node1');
graph.updateItem(node1, {
x: 100,
y: 100,
});
const comboId = node1.getModel().comboId;
// 更新 node1 所属的 combo 及其所有祖先 combo 的大小和位置
graph.updateCombo(comboId);
graph.updateComboTree(item, parentId)
更新 Combo 结构,例如移动子树等。
参数
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
item | string / INode / ICombo | true | 需要被更新的 Combo 或 节点 ID |
parentId | string / undefined | false | 新的父 combo ID,undefined 代表没有父 combo |
用法
// 将 combo1 从父 combo 中移出,完成后同原父 combo 平级
graph.updateComboTree('combo1')
// 将 combo1 移动到 Combo2 下面,作为 Combo2 的子元素
graph.updateComboTree('combo1', 'combo2')
配置
graph.node(nodeFn)
设置各个节点样式及其他配置,以及在各个状态下节点的 KeyShape 的样式。
提示: 该方法必须在 render 之前调用,否则不起作用。
参数
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
nodeFn | Function | true | 返回每个节点的配置 |
用法
graph.node((node) => {
return {
id: node.id,
type: 'rect',
style: {
fill: 'blue',
},
};
});
graph.data(data);
graph.render();
graph.edge(edgeFn)
设置各个边样式及其他配置,以及在各个状态下节点的 KeyShape 的样式。
提示: 该方法必须在 render 之前调用,否则不起作用。
参数
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
edgeFn | Function | true | 返回每条边的配置 |
用法
graph.edge((edge) => {
return {
id: edge.id,
type: 'cubic-horizontal',
style: {
stroke: 'green',
},
};
});
graph.data(data);
graph.render();
graph.combo(comboFn)
设置各个 combo 样式及其他配置,以及在各个状态下节点的 KeyShape 的样式。
提示: 该方法必须在 render 之前调用,否则不起作用。
参数
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
comboFn | Function | true | 返回每个 combo 的配置 |
用法
graph.combo((combo) => {
return {
id: combo.id,
type: 'rect',
style: {
stroke: 'green',
},
};
});
graph.data(data);
graph.render();
显示/隐藏
graph.showItem(item, stack)
显示指定的元素。若 item 为节点,则相关边也会随之显示。而 item.show() 则将只显示自身。
参数
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
item | string / Object | true | 元素 ID 或元素实例 |
stack | boolean | false | 操作是否入 undo & redo 栈,当实例化 Graph 时设置 enableStack 为 true 时,默认情况下会自动入栈,入栈以后,就支持 undo & redo 操作,如果不需要,则设置该参数为 false 即可 |
用法
// 通过 ID 查询节点实例
const item = graph.findById('nodeId');
graph.showItem(item);
// 等价于
graph.showItem('nodeId');
graph.hideItem(item, stack)
隐藏指定元素。若 item 为节点,则相关边也会随之隐藏。而 item.hide() 则将只隐藏自身。
参数
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
item | string / Object | true | 元素 ID 或元素实例 |
stack | boolean | false | 操作是否入 undo & redo 栈,当实例化 Graph 时设置 enableStack 为 true 时,默认情况下会自动入栈,入栈以后,就支持 undo & redo 操作,如果不需要,则设置该参数为 false 即可 |
用法
// 通过 ID 查询节点实例
const item = graph.findById('nodeId');
graph.hideItem(item);
// 等价于
graph.hideItem('nodeId');
Group 操作(4.0 将移除,建议使用 Combo)
graph.collapseGroup(groupId)
收起分组,收起分组后,隐藏分组中的所有节点和边,分组外部与分组内节点有连线的则临时连接到分组上面。
参数
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
groupId | string | true | 分组 ID |
用法
graph.collapseGroup('groupId');
graph.expandGroup(groupId)
展开分组,显示分组中的所有节点和边,恢复收起前的连接情况。
参数
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
groupId | string | true | 分组 ID |
用法
graph.expandGroup('groupId');