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' 渲染完毕后，画布不变，将图形放置在下中

示例源码

behaviourSignal {Object}

只读字段，存储一些行为的信号量。如：

{ draggingNode, // 是否正在拖拽节点 frameSelecting, // 是否正在进行框选 draggingEdge, // 是否正在进行拖拽边端点 resizingNode, // 是否正在节点变形操作 }

grid {Object}

网格配置项

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，表示拖、拉、拽交互时节点会对齐网格节点。这点在手动布局时对齐节点，非常有用。见下动图。

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 可是是值，也可是回调函数

/**
 * 节点颜色映射
 * @param  {String|Function} param 支持通用颜色
 */
graph.node().color(param)
/**
 * 节点大小映射
 * @param  {Number|Array|Function} param
 * Number 长宽均为该值
 * Array [width, height] 长宽
 */
graph.node().size(param)
/**
 * 节点形状映射
 * @param  {String|Function} param
 */
graph.node().shape(param)
/**
 * 节点文本映射
 * @param  {String|Function} param
 */
graph.node().label(param)
/**
 * 节点样式映射
 * @param  {Object|Function} param
 */
graph.node().style(param)
/**
 * 提示信息映射
 * @param  {Array|Function} param
 */
graph.node().tooltip(param)

示例

edge {Function}

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

/**
 * 边颜色映射
 * @param  {String|Function} param 支持通用颜色
 */
graph.edge().color(param)
/**
 * 边粗细映射
 * @param  {Number|Function} param
 */
graph.edge().size(param)
/**
 * 边形状映射
 * @param  {String|Function} param
 */
graph.edge().shape(param)
/**
 * 边文本映射
 * @param  {String|Function} param
 */
graph.edge().label(param)
/**
 * 样式映射
 * @param  {Object} param
 */
graph.edge().style(param)
/**
 * 提示信息映射
 * @param  {Array|Function} param
 */
graph.edge().tooltip(param)

示例

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

该方法需配合tooltip映射才能生效。
生成的提示框是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('itemremove', function(ev){});      // 子项移除后事件
graph.on('itemadd', function(ev){});         // 添加子项结束后
graph.on('itemmouseenter', function(ev){});  // 子项鼠标进入事件
graph.on('itemmouseleave', function(ev){});  // 子项鼠标离开事件
graph.on('afteritemrender', 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();

Graph

属性

id {String}

container {DOMobject}

width {Number}

height {Number}

fitView {String|Object}

behaviourSignal {Object}

grid {Object}

useAnchor {Boolean}

el {DOMobject}

modes {Object|String}

mode {String}

animate {Boolean}

实例方法

source {Function}

render {Function}

node {Function}

edge {Function}

tooltip {Function}

on {Function}

off {Function}

remove {Function}

update {Function}

find {Function}

refresh {Function}

changeData {Function}

changeMode {Function}

addBehaviour {Function}

removeBehaviour {Function}

setItemActived {Function}

autoZoom {Function}

autoSize {Function}

resetZoom {Function}

read {Function}

save {Function}

focusPoint {Function}

updateMatrix {Function}

changeSize {Function}

updateNodesPositon {Function}