g6/docs/api/graph/item.zh.md
2020-11-13 22:33:15 +08:00

9.7 KiB
Raw Blame History

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 IDundefined 代表没有父 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');