常用graph属性和方法

graph属性

container

height

width

modes

属性	类型	描述
container	string	放置canvas的div的id
height	number	高度
width	number	宽带
modes	object	模式

graph = new G6.Graph({
    container: "container",
    height: 500,
    width: 500,
    modes: {
        default: [
            "drag-canvas",
            "hover-node",
            "select-node",
            "hover-edge",
            "keyboard",
            "customer-events"
        ],
        addEdge: ["add-edge"],
        moveNode: ["drag-item"]
    },
     renderer: 'svg'
     plugins: [grid]
});

graph方法

初始化数据

data(data)

const data = {
  nodes: [
    {
      id: 'node1',
      label: 'node1',
    },
    {
      id: 'node2',
      label: 'node2',
    },
  ],
  edges: [
    {
      source: 'node1',
      target: 'node2',
    },
  ],
};

// graph 是 Graph 的实例
graph.data(data);

节点和边的增删改查

add(type,model)

新增元素（节点和边）

如果是自定义节点或者边type为自定义节点或者边的名称

addItem(type, model, stack)

新增元素（节点和边）

名称	类型	是否必选	描述
type	string	true	元素类型，可选值为 ‘node’、‘edge’
model	Object	true	元素的数据模型，具体内容参见元素配置项。
stack	boolean	false	操作是否入 undo & redo 栈，当实例化 Graph 时设置 enableStack 为 true 时，默认情况下会自动入栈，入栈以后，就支持 undo & redo 操作，如果不需要，则设置该参数为 false 即可

this.edge = this.graph.addItem('edge', {
	source: item,
	target: item,
	start: startPoint,
	end: startPoint,
	type: 'link-edge'
});

remove(node/edge)

移除节点或边

const node = this.graph.findById(item.id)
this.graph.remove(node)

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.removeItem(edge)

update(node/edge,nodeModel/edgeModel)

更新某个节点或者边的属性

参数	配置
node/edge	node节点对象或者边节点对象
nodeModel/edgeModel	model配置

graph.update(node, {name:1});
graph.update(edge, {name:1});

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 即可

graph.updateItem(edge, {
    routeName: response.routeName
});

find(type, fn)

根据具体规则查找单个元素。

名称	类型	是否必选	描述
type	string	true	元素类型，可选值为 ‘node’、‘edge’
fn	Function	true	查找的规则

const findNode = graph.find('node', (node) => {
  return node.get('model').x === 100;
});

findById(id)

根据 ID，查询对应的元素实例

名称	类型	是否必选	描述
id	string	true	元素 ID

findAllByState(type,state)

查找所有处于指定状态的元素

名称	类型	是否必选	描述
type	string	true	元素类型，可选值为 ‘node’、‘edge’
state	string	true	状态名称

graph.findAllByState('node', 'selected')

getNodes()

获取图中所有节点的实例。

⚠️ 注意: 这里返回的是节点的实例，而不是节点的数据项。

返回值类型：Array；

节点和边的状态相关

setItemState(item, state, value)

设置元素状态，当你使用自定义node节点时，setItemState方法为该方法内的setState方法。

名称	类型	是否必选	描述
item	string / Item	true	元素 ID 或元素实例
state	string	true	状态值，支持自定义，如 selected、hover、actived 等。
value	Boolean / string	true	是否启用状态

graph.setItemState(item, 'normal', true);

坐标转化

getPointByClient(clientX, clientY)

由于从屏幕获取的位置与canvas的位置不同，所以这个方法是减去了canvas的left和top后的位置

名称	类型	是否必选	描述
clientX	Number	true	屏幕 x 坐标
clientY	Number	true	屏幕 y 坐标

视野相关

getZoom()

获取当前视口的缩放比例

zoomTo(toRatio, center)

名称	类型	是否必选	描述
toRatio	Number	true	固定比例值
center	Object	false	以 center 的 x、y 坐标为中心缩放，如果省略了 center 参数，则以元素当前位置为中心缩放

// 以 (100, 100) 为中心点，放大3倍
graph.zoomTo(3, { x: 100, y: 100 });

// 以当前元素位置为中心，缩小到 0.5
graph.zoomTo(0.5);

属性相关

get(key)

名称	类型	是否必选	描述
key	string	true	属性的键

// 获取 group
const group = graph.get('group');

// 获取 canvas 实例
const canvas = graph.get('canvas');

// 获取 autoPaint 值
const autoPaint = graph.get('autoPaint');
const width = graph.get("width");
const height = graph.get("height");

画布相关

destroy()

删除画布就是canvas

graph.destroy()

setAutoPaint(auto)

设置是否在更新/删除后自动重绘，一般搭配 paint() 方法使用。
与setItemState搭配使用，在改变元素状态前后调用，当你使用自定义node节点时，setItemState方法为该方法内的setState方法，调用setItemState其实就是调用该node的setState方法。

名称	类型	是否必选	描述
auto	Boolean	true	是否自动重绘

const item = e.item;
const graph = this.graph;

const autoPaint = graph.get('autoPaint');
graph.setAutoPaint(false);

graph.setItemState(item, 'selected', true);

graph.paint();
graph.setAutoPaint(autoPaint);

paint()

仅重新绘制画布。当设置了元素样式或状态后，通过调用 paint() 方法，让修改生效。

refresh()

当源数据中现有节点/边/ Combo 的数据项发生配置的变更时，根据新数据刷新视图

graph.refresh();

setMode(mode)

切换模式，指的是在自定义行为中所定义的模式
这里的模式指的是graph的配置项modes

名称	类型	是否必选	描述
mode	string	true	模式的名称

graph = new G6.Graph({
    modes: {
        default: [
            "drag-canvas",
            "hover-node",
            "hover-edge",
            "keyboard",
        ],
        addEdge: ["add-edge"],
        moveNode: ["drag-item"]
    },
});
const behavors = {
    'hover-node': hoverNode,
    'add-edge': addLine,
    'drag-item': dragItem,
    'select-node': selectNode,
    'hover-edge': hoverEdge,
    'keyboard':keyboard
};
export function initBehavors() {
    for (let key in behavors) {
        G6.registerBehavior(key, behavors[key])
    }
}
this.graph.setMode('default')

想了解更多的AI技术干货，欢迎上华为云的AI专区，目前有AI编程Python等六大实战营供大家免费学习。(六大实战营link:http://su.modelarts.club/qQB9)