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


声明Graph

 const graph = new G6.Graph({
 	 container: 'mountNode',
   width: 500,
   height: 500
 });


配置项

名称

类型

默认值

描述

contianer

String|

HTMLElement


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

width

Number


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

height

Number


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

fitViewPadding

Array|

Number


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

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

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

groupByTypes

Boolean

true

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

autoPaint

Boolean

true

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

mode

String

'default'

画布所处模式。详情可见 Mode & Behavoir

nodeStyle

Object

{}

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

edgeStyle

Object

{}

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

defaultNode

Object

{}

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

defaultEdge

Object

{}

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

plugins

Array

[]

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




实例方法

生命周期/绘制

 const data = {
   nodes: [{
     shape: 'rect',
     x: 0,
     y: 0,
     id: 'id',
     size: [150, 50],
     label: 'text',
     style: { fill: '#fff' }
   }],
   edges: []
 }

具体图元素的数据定义及方法,可见 Item







// clear 函数一般用于清空数据源,重新设置数据源,重新 render 的场景,此时所有的图形都会销毁
chart.clear();
chart.data(newData);
chart.render();

// 上面的代码等同于
chart.changeData(newData);
// changeData 会找到数据同原先图形的对应关系,进行增量更新。



// 默认情况下每次 add,remove,update 操作整个图都会重绘
graph.add('node', {});
graph.remove(item);
graph.update(item, {x: 10, y: 10});
// 此时画布会重绘 3 次,可以先关闭 autoPaint
graph.setAutoPaint(false);
graph.add('node', {});
graph.remove(item);
graph.update(item, {x: 10, y: 10});
graph.paint();
graph.setAutoPaint(true);
// 仅重绘一次



元素操作

graph.add('node', {
	x: 10,
  y: 10,
  shape: 'rect',
  size: [20, 40]
});
// add 和 addItem 是同名函数, 所以两者等价
graph.addItem('node', {
	x: 10,
  y: 10,
  shape: 'rect',
  size: [20, 40]
});


const item = graph.findById('node1');
graph.remove(item);
//等同于
graph.removeItem(item);


const item = graph.findById('node1');
graph.update(item, {
	x: 10,
  y: 20
});

graph.update(item, {
	shape: 'circle' // 改变 shape 时,会强制重绘
});



if(xxx) {
  graph.showItem(item); // 之所以提供 graph.show() graph.hide() 方法怕带来歧义
} else {
  graph.hideItem(item);
}








事件与行为

API







支持的事件


事件实例中包含以下属性

属性名

描述

item

触发事件的元素,若是画布事件则为空

target

触发事件的具体 G.Shape 实例

currentTarget

graph 实例

x

相对于整个画布的横坐标

y

相对于整个画布的纵坐标

canvasX

相对于 <canvas> 标签左上角的横坐标

canvasY

相对于 <canvas> 标签左上角的纵坐标

clientX

相对于页面的横坐标

clientY

相对于页面的纵坐标

type

事件类型


查找元素

const node = graph.findById('node1');


 const node = graph.find('node', node => {
   return node.get('id') === 'nodeId';
 });


const nodes = graph.findAllByState('node', 'selected');


const edges = graph.findAll('edge', edge => {
	return edge.isVisble();
});


视口相关








图片保存