Graph

Abstract

所有上层图的抽象类,都继承于该类

属性

下面是创建关系图的语法,生成的 Graph 提供了关系图配置的各种方法,下面会介绍到。

var graph = new G6.Graph({
  id: 'c1',
  width: 500,
  height: 500
});

G6 对象的所有属性获取方式如下:

graph.get('属性名');

下面对所有的属性依次作说明介绍:

id {String}

创建关系图的 DOM 容器 id。

container {DOMobject}

除了传递 id 值来指定关系图容器,也支持直接传入容器的 html 节点对象。

width {Number}

设置关系图的宽度,单位像素。若不设置,则会根据父节点自适应宽度。

height {Number}

设置关系图的高度,单位像素。

fitView {String|Object}

初次绘制适应视口,接收如下参数:

  • 'autoSize' 渲染完毕后,图形不变,自动缩放画布
  • 'autoZoom' 渲染完毕后,画布不变,自动缩放图形
  • 'tl' 渲染完毕后,画布不变,将图形放置在左上
  • 'lc' 渲染完毕后,画布不变,将图形放置在左中
  • 'bl' 渲染完毕后,画布不变,将图形放置在左下
  • 'cc' 渲染完毕后,画布不变,将图形放置在中间
  • 'tc' 渲染完毕后,画布不变,将图形放置在上中
  • 'tr' 渲染完毕后,画布不变,将图形放置在右上
  • 'rc' 渲染完毕后,画布不变,将图形放置在右中
  • 'br' 渲染完毕后,画布不变,将图形放置在右下
  • 'bc' 渲染完毕后,画布不变,将图形放置在下中

示例源码


grid {Object}

网格配置项

image

G6 内置了一套网格系统,cell 可以配置单个网格的大小,line 配置网格线的样式。

var data = {
  nodes: [],
  edges: []
};
var graph = new G6.Graph({
  id: 'c1',           // 容器ID
  width: 500,         // 画布宽
  height: 500,        // 画布高
  grid: {
    forceAlign: true, // 是否支持网格对齐
    cell: 10,         // 网格大小
    line: {           // 网格线样式
      stroke: '#333'
    }
  }
});
graph.source(data.nodes, data.edges);
graph.render();

配置为 null,则不显示网格

grid: null

forceAlign 是配合内置交互的配置项,为 true,表示拖、拉、拽交互时节点会对齐网格节点。这点在手动布局时对齐节点,非常有用。见下动图。

image

useAnchor {Boolean}

是否使用锚点

el {DOMobject}

最上层的canvas DOM,原生DOM事件由它捕获,可用于设置鼠标样式。

modes {Object|String}

模式列表

示例:

{
  default: ['dragNode', 'clickActive'],
  add: ['clickAddNode']
}

mode {String}

当前选择的模式,默认 default

animate {Boolean}

是否开启动画

实例方法

source {Function}

加载数据源

以下字段对默认的node有特定含义

{
  id,      // 唯一标识
  x,       // x 坐标
  y,       // y 坐标
  size,    // 尺寸
  style,   // 样式
  color,   // 颜色
  shape,   // 形状
  label    // 标注
}

以下字段对默认的edge有特定含义

{
  id,            // 唯一标识
  size,          // 尺寸
  style,         // 样式
  color,         // 颜色
  shape,         // 形状
  label,         // 标注
  controlPoints, // 控制点
  sourceAnchor,  // 连接源节点锚点索引
  targetAnchor   // 连接目标节点锚点索引
}

示例

render {Function}

渲染数据

/**
 * 渲染
 */
graph.render();

node {Function}

param 可是是值,也可是回调函数

graph.node().color(param) 节点颜色映射
graph.node().size(param) 节点大小映射
graph.node().shape(param) 节点形状映射
graph.node().label(param) 节点文本映射
graph.node().style(param) 样式映射
graph.node().tooltip(param) 提示信息映射

示例

edge {Function}

param 可是是值,也可是回调函数

graph.edge().color(param) 边颜色映射
graph.edge().size(param)  边大小映射
graph.edge().shape(param) 边形状映射
graph.edge().label(param) 边文本映射
graph.edge().style(param) 样式映射
graph.edge().tooltip(param) 提示信息映射

示例

tooltip {Function}

G6 中提示信息功能默认关闭,若要开启,需要调用该方法。需要注意以下几点:

  1. 该方法需配合tooltip映射才能生效。
  2. 生成的提示框是DOM节点,可以在外部用css控制样式
graph.tooltip(true)

示例:

示例源码

graph.tooltip({
  title: '标题', // @type {String} 标题
  split: '=>',  // @type {String} 分割符号
  dx: 10,       // @type {Number} 水平偏移
  dy: 10        // @type {Number} 竖直偏移
});

示例:

示例源码

on {Function}

事件绑定。ev 是事件对象,含下列字段:

  • x 在画布上的坐标x
  • y 在画布上的坐标y
  • domX 相对于画布容器的坐标
  • domY 相对于画布容器的坐标y
  • item 节点或者边
  • shape 当前的形
  • itemType 'node' or 'edge'
  • toEvObj 到达的目标事件对象 (mouseleave时可用)
/**
 * 事件绑定
 * @param  {String}   eventType 事件类型
 * @param  {Function} fn        回调函数
 */
graph.on(eventType,fn);

graph 上目前支持一下事件

graph.on('click', function(ev){});           // 鼠标左键单击事件
graph.on('dblclick', function(ev){});        // 鼠标左键双击事件
graph.on('mousedown', function(ev){});       // 鼠标左键按下事件
graph.on('mouseup', function(ev){});         // 鼠标左键抬起事件
graph.on('mousemove', function(ev){});       // 鼠标移动事件
graph.on('contextmenu', function(ev){});     // 鼠标右键点击事件
graph.on('mouseenter', function(ev){});      // 鼠标进入元素事件
graph.on('mouseleave', function(ev){});      // 鼠标离开元素事件
graph.on('keydown', function(ev){});         // 键盘按键按下事件
graph.on('keyup', function(ev){});           // 键盘按键抬起事件
graph.on('mousewheel', function(ev){});      // 鼠标滚轮事件
graph.on('itemactived', function(ev){});     // 子项激活后事件
graph.on('itemunactived', function(ev){});   // 子项取消激活后事件
graph.on('itemhover', function(ev){});       // 子项鼠标悬浮事件
graph.on('itemupdate', function(ev){});      // 子项更新后事件
graph.on('itemmouseenter', function(ev){});  // 子项鼠标进入事件
graph.on('itemmouseleave', function(ev){});  // 子项鼠标离开事件

示例

off {Function}

事件解除。callBack 用于指定要删除的回调方法,如果没有设置,则解除所有该事件类型下的方法。

/**
 * 事件解除
 * @param  {String}   eventType 事件类型
 * @param  {Function} fn        回调函数
 */
graph.off(eventType,fn);

remove {Function}

删除子项,param 是子项或是子项id

/**
 * 删除子项
 * @param  {Item|String}   param
 */
graph.remove(item)

update {Function}

更新子项,param 是子项或是子项id,model 是数据模型。

/**
 * 更新子项数据模型
 * @param  {Item|String}   param
 * @param  {Object} model
 */
graph.update(param, model)

find {Function}

查找子项

/**
 * 通过 id 查找子项
 * @param  {String} id
 */
graph.find(id)

refresh {Function}

调用了一些直接操作图形的接口,要刷新画布才能显示效果。

/**
 * 刷新画布
 */
graph.refresh();

changeData {Function}

重新加载数据,并刷新。(接收的数据 和 source 方法一致)

/**
 * 更改数据
 */
graph.changeData(param1, param2, ……);

changeMode {Function}

改变模式

/**
 * 改变编辑模式
 * @param  {String} modeName 模式名
 */
graph.changeMode(modeName);

addBehaviour {Function}

在某个模式下添加行为

/**
 * 添加行为
 * @param  {String} modeName   模式
 * @param  {String} behaviours 行为集
 */
graph.addBehaviour(modeName, behaviours);

也可以不传modeName,只传behaviours,则把所有模式中的该行为集合全部添加。

/**
 * 添加行为
 * @param  {String} behaviours  行为集
 */
graph.addBehaviour(behaviours);

removeBehaviour {Function}

移除行为(与addBehaviour 对应)

/**
 * 添加行为
 * @param  {String} modeName   模式
 * @param  {String} behaviours 行为集
 */
graph.removeBehaviour(modeName, behaviours);

也可以不传modeName,只传behaviours,则把所有模式中的该行为集合全部删除。

/**
 * 添加行为
 * @param  {String} behaviours  行为集
 */
graph.removeBehaviour(behaviours);

setItemActived {Function}

设置子项激活,item 是子项。

/**
 * 设置子项激活,`item`是子项。
 * @param  {Item}    item 子项
 * @param  {Boolean} bool 设置是否激活
 */
graph.setItemActived(item, bool);

autoZoom {Function}

自动缩放

graph.autoZoom();

autoSize {Function}

自动图形居中,并缩放画布尺寸

graph.autoSize();

resetZoom {Function}

重置缩放

graph.resetZoom();

read {Function}

读数据,与 save 对应。

/**
 * 读数据
 * @param  {Object} data 子项
 */
graph.read(data);

save {Function}

存数据,与 read 对应。

/**
 * 存数据
 * @return {Object} data
 */
graph.save();

focusPoint {Function}

以某点为中心显示画布

/**
 * 聚焦某点
 * @param  {Object} point 点
 */
graph.focusPoint(point);

updateMatrix {Function}

更新画布根节点矩阵

/**
 * 更新画布根节点矩阵
 * @param  {Object} matrix 矩阵
 */
graph.updateMatrix(point);

changeSize {Function}

更改画布的尺寸

/**
 * 更改画布的尺寸
 * @param  {Number} width  宽度
 * @param  {Number} height 高度
 */
graph.changeSize(width, height);

updateNodesPositon {Function}

更新节点位置信息(一般与动态布局联用)

/**
 * 更新节点位置信息
 */
graph.updateNodesPositon();