属性 | 类型 | 描述 |
---|---|---|
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]
});
const data = {
nodes: [
{
id: 'node1',
label: 'node1',
},
{
id: 'node2',
label: 'node2',
},
],
edges: [
{
source: 'node1',
target: 'node2',
},
],
};
// graph 是 Graph 的实例
graph.data(data);
新增元素(节点和边)
如果是自定义节点或者边type为自定义节点或者边的名称
新增元素(节点和边)
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
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'
});
移除节点或边
const node = this.graph.findById(item.id)
this.graph.remove(node)
删除元素,当 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)
更新某个节点或者边的属性
参数 | 配置 |
---|---|
node/edge | node节点对象或者边节点对象 |
nodeModel/edgeModel | model配置 |
graph.update(node, {name:1});
graph.update(edge, {name:1});
更新元素,包括更新数据、样式等。若图上有 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
});
根据具体规则查找单个元素。
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
type | string | true | 元素类型,可选值为 ‘node’、‘edge’ |
fn | Function | true | 查找的规则 |
const findNode = graph.find('node', (node) => {
return node.get('model').x === 100;
});
根据 ID,查询对应的元素实例
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
id | string | true | 元素 ID |
查找所有处于指定状态的元素
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
type | string | true | 元素类型,可选值为 ‘node’、‘edge’ |
state | string | true | 状态名称 |
graph.findAllByState('node', 'selected')
获取图中所有节点的实例。
⚠️ 注意: 这里返回的是节点的实例,而不是节点的数据项。
返回值类型:Array;
设置元素状态,当你使用自定义node节点时,setItemState方法为该方法内的setState方法。
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
item | string / Item | true | 元素 ID 或元素实例 |
state | string | true | 状态值,支持自定义,如 selected、hover、actived 等。 |
value | Boolean / string | true | 是否启用状态 |
graph.setItemState(item, 'normal', true);
由于从屏幕获取的位置与canvas的位置不同,所以这个方法是减去了canvas的left和top后的位置
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
clientX | Number | true | 屏幕 x 坐标 |
clientY | Number | true | 屏幕 y 坐标 |
获取当前视口的缩放比例
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
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);
名称 | 类型 | 是否必选 | 描述 |
---|---|---|---|
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");
删除画布就是canvas
graph.destroy()
设置是否在更新/删除后自动重绘,一般搭配 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() 方法,让修改生效。
当源数据中现有节点/边/ Combo 的数据项发生配置的变更时,根据新数据刷新视图
graph.refresh();
切换模式,指的是在自定义行为中所定义的模式
这里的模式指的是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')
概念:元素是包含节点和边的实例
获取元素的数据模型
// 获取元素的数据模型
const model = item.getModel();
// 等价于
const model = item.get('model');
判断元素是否具有某种指定的状态
item.hasState('normal')
获取group
// 获取元素的容器
const group = item.getContainer();
// 等价于
const group = item.get('group');
获取元素的类型
// 获取元素的类型
const type = item.getType();
// 等价于
const type = item.get('type');
获取元素的包围盒
item.getBBox();
概念:节点继承至元素,元素所有的方法节点也有
获取与当前节点有关联的所有边
// 获取与 node 关联的所有边
const edges = node.getEdges();
获取与当前节点关联的所有入边
获取与当前节点关联的所有出边
// 获取与 node 关联的所有出边
const edges = node.getOutEdges();
获取边的model
获取属性值
获取当前边的起始节点
类型 | 配置 |
---|---|
type | rect |
cfgs | attrs:id、x、y、width、height、lineWidth、shadowColor、stroke、fill、radius、opacity。draggable:true |
type | text |
cfgs | attrs:id、x、y、textAlign、textBaseline、lineHeight、text、parent、fill、fontSize、opacity。draggable:true |
type | circle |
cfgs | attrs:id、x、y、r、isInPointOut(自定义)、parent、fill、opacity、stroke。draggable:true |
G6 的自定义机制,包括自定义节点、自定义边、自定义 combo、自定义交互行为、自定义布局的相关方法。它们都被挂载在 G6 全局上,通过 G6.registerXXX 进行调用。
名称 | 类型 | 是否必选 |
---|---|---|
nodeName | String | true |
options | options | true |
extendedNodeName | String | false |
G6.registerNode(
'nodeName',
{
/**
* 绘制节点,包含文本
* @param {Object} cfg 节点的配置项
* @param {G.Group} group 图形分组,节点中的图形对象的容器
* @return {G.Shape} 绘制的图形,通过 node.get('keyShape') 可以获取到
*/
draw(cfg, group) {},
/**
* 绘制后的附加操作,默认没有任何操作
* @param {Object} cfg 节点的配置项
* @param {G.Group} group 图形分组,节点中的图形对象的容器
*/
afterDraw(cfg, group) {},
/**
* 更新节点,包含文本
* @override
* @param {Object} cfg 节点的配置项
* @param {Node} node 节点
*/
update(cfg, node) {},
/**
* 更新节点后的操作,一般同 afterDraw 配合使用
* @override
* @param {Object} cfg 节点的配置项
* @param {Node} node 节点
*/
afterUpdate(cfg, node) {},
/**
* 设置节点的状态,主要是交互状态,业务状态请在 draw 方法中实现
* 单图形的节点仅考虑 selected、active 状态,有其他状态需求的用户自己复写这个方法
* @param {String} name 状态名称
* @param {Object} value 状态值
* @param {Node} node 节点
*/
setState(name, value, node) {},
/**
* 获取锚点(相关边的连入点)
* @param {Object} cfg 节点的配置项
* @return {Array|null} 锚点(相关边的连入点)的数组,如果为 null,则没有锚点
*/
getAnchorPoints(cfg) {},
},
'extendedNodeName',
);
- 必须有自定义文件
- 必须使用registerBehavior
- modes中添加注册的行为
自定义文件:selectNode.js,内容如下:
//自定义文件
let selectNode = {
getEvents(){
return {
'node:click':'onClick'
}
},
onClick(e){
console.log(e)
}
}
//注册自定义行为
this.behavors = {
'select-node':selectNode
}
for(let key in this.behavors){
G6.registerBehavior(key,this.behavors[key])
}
//Graph对象中引用该行为
const graph = new G6.Graph({
container: 'flow_container',
width,
height,
fitCenter: true,
modes: {
default: ["select-node",],
}
});
名称 | 类型 | 是否必选 |
---|---|---|
edgeName | String | true |
options | options | true |
extendedEdgeName | String | false |
G6.registerEdge(
'edgeName',
{
/**
* 绘制边,包含文本
* @param {Object} cfg 边的配置项
* @param {G.Group} group 图形分组,边中的图形对象的容器
* @return {G.Shape} 绘制的图形,通过 node.get('keyShape') 可以获取到
*/
draw(cfg, group) {},
/**
* 绘制后的附加操作,默认没有任何操作
* @param {Object} cfg 边的配置项
* @param {G.Group} group 图形分组,边中的图形对象的容器
*/
afterDraw(cfg, group) {},
/**
* 更新边,包含文本
* @override
* @param {Object} cfg 边的配置项
* @param {Edge} edge 边
*/
update(cfg, edge) {},
/**
* 更新边后的操作,一般同 afterDraw 配合使用
* @override
* @param {Object} cfg 边的配置项
* @param {Edge} edge 边
*/
afterUpdate(cfg, edge) {},
/**
* 设置边的状态,主要是交互状态,业务状态请在 draw 方法中实现
* 单图形的边仅考虑 selected、active 状态,有其他状态需求的用户自己复写这个方法
* @param {String} name 状态名称
* @param {Object} value 状态值
* @param {Edge} edge 边
*/
setState(name, value, edge) {},
},
'extendedEdgeName',
);