Graph是G6图表的载体,所有的G6节点实例操作以及事件,行为监听都在Graph实例上进行。


Graph的生命周期为:初始化——>加载数据——>渲染——>更新——>销毁。


初始化

G6.Graph

参数

名称

类型

默认值

描述

contianer

string|

HTMLElement

undefined

图的 DOM 容器,可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象

width

number

undefined

指定画布宽度,单位为 'px'

height

number

undefined

指定画布高度,单位为 'px'

renderer

string

canvas

渲染引擎,支持canvas和svg。

fitViewPadding

array | number


图适应画布时,指定四周的留白。

  • 可以是一个值, 例如:fitViewPadding: 20
  • 也可以是一个数组,例如:fitViewPadding: [20, 40, 50,20]

当指定一个值时,四边的边距都相等,当指定数组时,数组内数值依次对应 上,右,下,左四边的边距。

groupByTypes

boolean

true

各种元素是否在一个分组内,决定节点和边的层级问题,默认情况下所有的节点在一个分组中,所有的边在一个分组中,当这个参数为 false 时,节点和边的层级根据生成的顺序确定。

autoPaint

boolean

true

当图中元素更新,或视口变换时,是否自动重绘。建议在批量操作节点时关闭,以提高性能,完成批量操作后再打开,参见后面的 setAutoPaint() 方法。

modes

object


设置画布的模式。详情可见G6中的Mode文档

nodeStyle

object

{}

各个状态下节点的样式,对 G6 内置节点有效。

edgeStyle

object

{}

各个状态下边的样式,对 G6 内置边有效。

defaultNode

Object

{}

默认状态下节点的配置,比如 shape, size, color。会被写入的 data 覆盖。

defaultEdge

Object

{}

默认状态下边的配置,比如 shape, size, color。会被写入的 data 覆盖。

plugins

array

[]

向 graph 注册插件。插件机制请见:plugin

animate

boolean

false

是否启用全局动画。

animateCfg

object


动画配置项,仅在animate为true时有效。

animateCfg.

onFrame

function | null

null

回调函数,用于自定义节点运动路径。

animateCfg.

duration

number

500

动画时长,单位为毫秒。

animateCfg.

easing

string

easeLinear

动画动效。

minZoom

number

0.2

最小缩放比例

maxZoom

number

10

最大缩放比例

pixeRatio

number

1.0

像素比率

用法

Graph的初始化通过new进行实例化,实例化时需要传入需要的参数。


const graph = new G6.Graph({
	container: '',
  width: 500,
  height: 500,
  modes: {
    default: ['drag-canvas']
  }
})



加载

data(data)

设置图初始化数据。


参数

名称

类型

是否必选

描述

data

object

true

初始化的图数据,是一个包括nodes和edges的对象

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

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


渲染

render()

根据提供的数据渲染视图。


用法
graph.render()


read(data)

接收数据,并进行渲染,read方法的功能相当于data和render方法的结合。


参数

名称

类型

是否必选

描述

data

object

true

初始化的图数据,是一个包括nodes和edges的对象

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

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


changeData(data)

更新数据源,根据新的数据重新渲染视图。


参数

名称

类型

是否必选

描述

data

object

true

初始化的图数据,是一个包括nodes和edges的对象

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

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


更新

addItem(type, model)

新增元素。


参数

名称

类型

是否必选

描述

type

string

true

元素类型,可选值为node和edge

model

object

true

元素的数据模型

用法
const model = {
	id: 'node',
  label: 'node',
  address: 'cq',
  x: 200,
  y: 150,
  style: {
  	fill: 'blue'
  }
}

graph.addItem('node', model)


add(type, model)

同addItem(type, model)。


updateItem(item, model)

更新元素,包括更新数据、样式等。


参数

名称

类型

是否必选

描述

item

string | object

true

元素ID或元素实例

cfg

object

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)


update(item, model)

同updateItem(item, model)。


removeItem(item)

删除元素。


参数

名称

类型

是否必选

描述

item

string | object

true

元素ID或元素实例

用法
// 通过ID查询节点实例
const item = graph.findById('node')
graph.removeItem(item)


remove(item)

同removeItem(item)。


refresh()

当源数据发生变更时,根据新数据刷新视图,但不刷新节点位置


该方法无参数。


用法
graph.refresh()


refreshItem(item)

刷新指定元素,不改变元素位置。


参数

名称

类型

是否必选

描述

item

string | object

true

元素ID或元素实例

用法
// 通过ID查询节点实例
const item = graph.findById('node')
graph.refreshItem(item)


refreshPositions()

当节点位置发生变化时,刷新所有节点位置,并重计算边的位置。


该方法无参数。


用法
graph.refreshPositions()



paint()

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


该方法无参数。


用法
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);


setAutoPaint(auto)

设置是否在更新/删除后自动重绘,一般搭配paint()方法使用。


参数

名称

类型

是否必选

描述

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);


销毁

clear()

清除画布元素。该方法一般用于清空数据源,重新设置数据源,重新 render 的场景,此时所有的图形都会被清除。


该方法无参数。


用法
graph.clear()


destroy()

销毁画布。


该方法无参数。


用法
graph.destroy()


状态

showItem(item)

显示指定的元素。


参数

名称

类型

是否必选

描述

item

string | object

true

元素ID或元素实例

用法
// 通过ID查询节点实例
const item = graph.findById('node')
graph.showItem(item)

// 等价于
graph.showItem('node')


hideItem(item)

隐藏指定元素。


参数

名称

类型

是否必选

描述

item

string | object

true

元素ID或元素实例

用法
// 通过ID查询节点实例
const item = graph.findById('node')
graph.hideItem(item)

// 等价于
graph.hideItem('node')


setItemState(item, state, enabled)

设置元素状态。


该方法在执行过程中会触发beforitemstatechangeitemafteritemstatechange事件。


参数

名称

类型

是否必选

描述

item

string | object

true

元素ID或元素实例

state

string

true

状态值,支持自定义,如selected、hover、actived等。

enabled

boolean

true

是否启用状态

用法
graph.setItemState('node1', 'selected', true);


clearItemStates(item, states)

清除元素状态,可以一次性清除多个状态。


参数

名称

类型

是否必选

描述

item

string | object

true

元素ID或元素实例

states

string | array | null 

false

取值可以是单个状态值,也可以是状态值数组或null,当为null时,清除该元素的所有状态。

用法
// 清除单个状态
graph.clearItemStates(node, 'a');

// 清除多个状态
graph.clearItemStates(node, ['a', 'b']);

// 清除所有状态
graph.clearItemStates(node);


node(nodeFn)

设置各个节点样式,以及在各个状态下节点的KeyShape的样式。


提示:该方法必须在render之前调用,否则不起作用。


参数

名称

类型

是否必选

描述

nodeFn

Function

true

指定每个节点样式

用法
graph.node((node) => {
  return {
    id: node.id,
    shape: 'rect',
    style: {
      fill: 'blue'
    }
  }
})

graph.data(data)
graph.render()


edge(edgeFn)

设置各条边的样式。


提示:该方法必须在render之前调用,否则不起作用。


参数

名称

类型

是否必选

描述

edgeFn

Function

true

指定每条边的样式

用法
graph.edge((edge) => {
  return {
    id: edge.id,
    shape: 'cubic-horizontal',
    style: {
      stroke: 'green'
    }
  }
})

graph.data(data)
graph.render()


交互

addBehaviors(behaviors, modes)

新增行为,将单个或多个行为添加到单个或多个模式中。


参数

名称

类型

是否必选

描述

behaviors

string | array

true

添加的行为的名称

modes

string | array

true

模式的名称

用法
// 将单个Behavior添加到单个模式(默认的default模式)中
graph.addBehaviors('click-select', 'default');

// 将多个Behavior添加到单个模式(默认的default模式)中
graph.addBehaviors([ 'brush-select', 'click-select' ], 'default');

// 将单个Behavior添加到多个模式中
graph.addBehaviors('brush-select', ['default', 'select']);

// 将多个Behavior添加到多个模式中
graph.addBehaviors([ 'brush-select', 'click-select' ], ['default', 'select']);


removeBehaviors(behaviors, modes)

移除行为,将单个或多个行为从单个或多个模式中去除。


参数

名称

类型

是否必选

描述

behaviors

string | array

true

删除的行为的名称

modes

string | array

true

模式的名称

用法
// 从单个模式中移除单个Behavior
graph.removeBehaviors('click-select', 'default');

// 从单个模式中移除多个Behavior
graph.removeBehaviors([ 'brush-select', 'click-select' ], 'default');

// 从多个模式中移除单个Behavior
graph.removeBehaviors('brush-select', ['default', 'select']);

// 从多个模式中移除多个Behavior
graph.removeBehaviors([ 'brush-select', 'click-select' ], ['default', 'select']);


setMode(mode)

切换图行为模式。主要用于不同模式下的行为切换,如从编辑模式下切换到只读模式。


参数

名称

类型

是否必选

描述

mode

string

true

模式的名称

用法
const graph = new G6.Graph({
    container: div,
    width: 500,
    height: 500,
    pixelRatio: 2,
    modes: {
      default: [...],
      custom: [...]
    }
})

graph.setMode('custom')


getCurrentMode()

获取当前的行为模式。


该方法无参数。


返回值


用法
// 返回值mode表示当前的行为模式
const mode = graph.getCurrentMode()


getZoom()

获取当前视口的缩放比例。


该方法无参数。


返回值


用法
// 返回值zoom表示当前视口的缩放比例
const zoom = graph.getZoom()


zoom(ratio, center)

改变视口的缩放比例,在当前画布比例下缩放,是相对比例。


参数

名称

类型

是否必选

描述

ratio

number

true

缩放比例

center

object

false

以center的x、y坐标为中心缩放,如果省略了center参数,则以元素当前位置为中心缩放

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

// 以当前元素位置为中心,缩小到0.5
graph.zoom(0.5)


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)

focusItem(item)

将元素移动到视口中心,该方法可用于做搜索后的缓动动画。


参数

名称

类型

是否必选

描述

item

string | object

true

元素ID或元素实例

用法
graph.focusItem(item)


changeSize(width, height)

改变画布大小。


参数

名称

类型

是否必选

描述

width

number

true

画布宽度

height

number

true

画布高度

用法
graph.changeSize(600, 350)


translate(dx, dy)

采用相对位移来平移画布。


参数

名称

类型

是否必选

描述

dx

number

true

水平方向位移

dy

number

true

垂直方向位移

用法
graph.translate(100, 100);


moveTo(x, y)

采用绝对位移将画布移动到指定坐标。


参数

名称

类型

是否必选

描述

x

number

true

水平方向坐标

y

number

true

垂直方向坐标

用法
graph.moveTo(200, 300)


fitView(padding)

让画布内容适应视口。


参数

名称

类型

是否必选

描述

padding

number | array

true

[top, right, bottom, left] 四个方向上的间距值

用法
// padding只设置为一个值,则表示top = right = bottom = left = 20
graph.fitView(20)

// 等价于graph.fitView(20)
graph.fitView([20])

// padding设置为数组,只传2个值,则top = bottom = 20, right = left = 10
graph.fitView([20, 10])

// padding设置为数组,四个方向值都指定
graph.fitView([20, 10, 20, 15])


查找

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

返回值


用法
const node = graph.findById('node')


findAll(type, fn)

查询所有满足规则的元素。


参数

名称

类型

是否必选

描述

type

string

true

元素类型,可选值为node、edge

fn

function

true

查找的规则

返回值


用法
const nodes = graph.findAll('node', node => {
  return node.get('model').x;
});


findAllByState(type, state)

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


参数

名称

类型

是否必选

描述

type

string

true

元素类型,可选值为node、edge

state

string

true

状态

返回值


用法
// 查询所有选中的元素
const nodes = graph.findAllByState('node', 'selected');


数据

save()

获取图数据。


该方法无参数。


返回值
{
	nodes: [],
  edges: []
}


用法
graph.save()


getNodes()

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


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


返回值


用法
const nodes = graph.getNodes()


getEdges()

获取图中所有边的实例。


注意:这里返回的是边的实例,而不是边的数据项。


返回值


用法
const edges = graph.getEdges()


坐标转换

这部分主要是说明视口坐标、Canvas坐标和页面坐标之前的相互转换。其中视口坐标和Canvas坐标的示意图如下所示。

image.png

getPointByClient(clientX, clientY)

将屏幕/页面坐标转换为视口坐标。


参数

名称

类型

是否必选

描述

clientX

number

true

屏幕x坐标

clientY

number

true

屏幕y坐标

返回值


用法
const point = canvas.getPointByClient(e.clientX, e.clientY);
console.log('视口x/y坐标分别为:', point.x, point.y)


getClientByPoint(x, y)

将视口坐标转换为屏幕/页面坐标。


参数

名称

类型

是否必选

描述

x

number

true

视口x坐标

y

number

true

视口y坐标

返回值


用法
const point = canvas.getClientByPoint(100, 200);
console.log('屏幕/页面x/y坐标分别为:', point.x, point.y)


getPointByCanvas(canvasX, canvasY)

将Canvas画布坐标转换为视口坐标。


参数

名称

类型

是否必选

描述

canvasX

number

true

画布x坐标

canvasY

number

true

画布y坐标

返回值


用法
const point = canvas.getPointByCanvas(100, 200);
console.log('视口x/y坐标分别为:', point.x, point.y)


getCanvasByPoint(x, y)

将视口坐标转换为Canvas画布坐标。


参数

名称

类型

是否必选

描述

x

number

true

视口x坐标

y

number

true

视口y坐标

返回值


用法
const point = canvas.getCanvasByPoint(100, 200);
console.log('Canvas画布的x/y坐标分别为:', point.x, point.y)


动画

positionsAnimate()

根据Graph上的animateCfg配置项,处理视口中节点的动画。


stopAnimate()

停止画布上的所有动画。


用法
graph.stopAnimate()


isAnimating()

判断当前是否有正在执行的动画。


其他

addPlugin(plugin)

添加指定的插件。


参数

名称

类型

是否必选

描述

plugin

object

true

插件实例

用法
import miniMap from '@antv/g6/build/minimap'
graph.Plugin(miniMap)


removePlugin(plugin)

移除指定的插件。


参数

名称

类型

是否必选

描述

plugin

object

true

插件实例

用法
import miniMap from '@antv/g6/build/minimap'
graph.removePlugin(miniMap)


get(key)

根据key获取属性值。


参数

名称

类型

是否必选

描述

key

string

true

属性的键

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

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

// 获取autoPaint值
const autoPaint = graph.get('autoPaint')


set(key, val)

设置属性值。


参数

名称

类型

是否必选

描述

key

string

true

属性的键

val

string | object | array

true

属性的值

用法
// 设置capture值为false
graph.set('capture', false)

// 设置customGroup值为group
graph.set('customGroup', group)

// 设置nodeIdList值为数组
graph.set('nodeIdList', [1, 3, 5])


downloadImage(name)

将画布上的元素导出为图片。


参数

名称

类型

是否必选

描述

name

string

true

图片的名称

用法
graph.downloadImage()


toDataURL()

将画布上元素生成为图片的URL。


返回值


用法
const dataURL = graph.toDataURL()