简介

Graph 是最基础的图类，G6 技术栈中所有关系图都是由该类负责绘制。

创建 Graph 的方式如下：

  1. new G6.Graph(cfg);

创建一个 graph 实例，返回一个 Graph 对象，建议在单个容器上只初始化一个 Graph 实例。参数 cfg 详见下列配置项。

配置项

container

需传入 dom 容器或者容器id {domObject || string} [必选]

width

画布宽，单位像素 {number} [可选]

不设置则自适应父容器宽

height

画布宽，单位像素 {number} [可选]

不设置则自适应父容器高

fitView

初始化视口区域 {string} [可选]

候选值为： ‘tl’, ‘lc’, ‘bl’, ‘cc’, ‘tc’, ‘tr’, ‘rc’, ‘br’, ‘bc’, ‘autoZoom’

Graph - 图1

fitViewPadding

视口适应画布边距 {number || array} [可选]

minZoom

最小缩放倍率 {number} [可选]

maxZoom

最大缩放倍率 {number} [可选]

modes

模式集 {object} [可选]
可按如下格式设置默认行为:

  1. new Graph({
  2.   modes: {
  3.     default: ['hehaviourName']
  4.   }
  5. });

mode

当前模式 {string} 默认： default

plugins

插件集 {array}

layout

布局参数 {object|function|object}

type`` {plainObject}

  1. {
  2.     auto: {boolean}, // 是否在画布数据变更后自动布局 默认 是true
  3.     processer: {object|function}, // 布局处理器
  4. }

type`` {function}

  1. (nodes, edges)=>{
  2.     // nodes 节点集
  3.     // edges 边集
  4.     // 在此处进行布局
  5. }

type`` {object}

  1. {
  2.     excute() {
  3.         this.nodes; // 节点集
  4.         this.edges; // 边集
  5.         this.graph; // 当前图类
  6.     }
  7. }

方法

save

保存当前图数据

  1. graph.save(); // 返回图数据

read

读取并渲染图数据。

  1. graph.read(data);

参数：

data`` {object} 数据模型
导入的数据模型，以下健名在 G6 中有特定含义，是保留字段，用户在设置自有数据时应 避免使用 。用以下格式传入数据：

  1. {
  2.     nodes:[],
  3.     edges:[],
  4.     groups: [],
  5.     guides: []
  6. }

节点的数据模型

  1. {
  2.     id: 'node1',             // id 必须唯一
  3.     color: '#333',           // 颜色
  4.     size: 10 || [10, 10],    // 尺寸 || [宽, 高]
  5.     shape: 'circle',         // 所用图形
  6.     style: {                 // 关键形样式（优先级高于color）
  7.         fill: 'red',
  8.         stroke: 'blue'
  9.     },
  10.     label: '文本标签' || {     // 文本标签 || 文本图形配置
  11.         text: '文本标签',    
  12.         fill: 'green'
  13.     },
  14.     parent: 'group1',         // 所属组
  15.     index: 1,                 // 渲染层级    
  16. }

边的数据模型 

  1. {
  2.     id: 'edge1',           // id 必须唯一
  3.     source: 'node1',       // 源节点 id    
  4.     target: 'node2',       // 目标节点 id
  5.     controlPoints: [{      // 控制点
  6.         x: 10,
  7.         y: 10
  8.     }],
  9.     sourceAnchor: 0,       // 源节点锚点
  10.     targetAnchor: 2,       // 目标节点锚点
  11.     color: 'red',          // 颜色
  12.     size: 3,               // 尺寸
  13.     shape: 'line',         // 所用图形
  14.     style: {               // 关键形样式（优先级高于color）
  15.         fill: 'red',
  16.         stroke: 'blue'
  17.     },
  18.     label: '文本标签' || {   // 文本标签 || 文本图形配置
  19.         text: '文本标签',
  20.         fill: 'green'
  21.     },
  22.     parent: 'group1',       // 所属组
  23.     index: 1,               // 渲染层级
  24. }

群组的数据模型

  1. {
  2.     id: 'group1',             // id 必须唯一
  3.     color: '#333',           // 颜色
  4.     size: 10 || [10, 10],    // 尺寸 || [宽, 高]
  5.     shape: 'circle',         // 所用图形
  6.     style: {                 // 关键形样式（优先级高于color）
  7.         fill: 'red',
  8.         stroke: 'blue'
  9.     },
  10.     label: '文本标签' || {     // 文本标签 || 文本图形配置
  11.         text: '文本标签',
  12.         fill: 'green'
  13.     },
  14.     parent: 'group2',         // 所属组

示例

  1. const data = {
  2.     nodes: [{
  3.         id: 'node1',
  4.         x: 100,
  5.         y: 200
  6.     },{
  7.         id: 'node2',
  8.         x: 300,
  9.         y: 200
  10.     }],
  11.     edges: [{
  12.         id: 'edge1',
  13.         target: 'node2',
  14.         source: 'node1'
  15.     }]
  16. };
  17. const graph = new G6.Graph({
  18.     container: 'mountNode',
  19.     width: 500,
  20.     height: 500
  21. });
  22. graph.read(data);

on

事件监听

参数
eventName{string} 事件名 <br />callback {function} 事件回调函数

事件对象

  1. {
  2.     currentItem,  // drag 拖动子项
  3.     currentShape, // drag 拖动图形
  4.     shape,        // 图形对象
  5.     item,         // 子项
  6.     domEvent,     // 原生的 dom 事件
  7.     x,            // 图横坐标
  8.     y,            // 图纵坐标
  9.     domX,         // dom横坐标
  10.     domY,         // dom纵坐标
  11.     action,       // 数据变更动作 add、update、remove、changeData
  12.     toShape,      // mouseleave、dragleave 到达的图形
  13.     toItem,       // mouseleave、dragleave 到达的子项

鼠标事件

这类事件可以与前缀 ‘’ （ 空即任意 ）， ‘node’，’edge’，’group’, ‘guide’，自由组合使用：

  1. graph.on('click', (ev)=>{});             // 鼠标左键点击事件
  2. graph.on('dblclick', (ev)=>{});          // 鼠标左键双击事件
  3. graph.on('mouseenter', (ev)=>{});        // 鼠标移入事件
  4. graph.on('mouseleave', (ev)=>{});        // 鼠标移出事件
  5. graph.on('mousedown', (ev)=>{});         // 鼠标按下事件
  6. graph.on('mouseup', (ev)=>{});           // 鼠标抬起事件
  7. graph.on('mousemove', (ev)=>{});         // 鼠标移动事件
  8. graph.on('dragstart', (ev)=>{});         // 鼠标开始拖拽事件
  9. graph.on('drag', (ev)=>{});              // 鼠标拖拽事件
  10. graph.on('dragend', (ev)=>{});           // 鼠标拖拽结束事件
  11. graph.on('dragenter', (ev)=>{});         // 鼠标拖拽进入事件
  12. graph.on('dragleave', (ev)=>{});         // 鼠标拖拽移出事件
  13. graph.on('drop', (ev)=>{});              // 鼠标拖拽放置事件
  14. graph.on('contextmenu', (ev)=>{});       // 菜单事件

其它事件

  1. graph.on('keydown', function(ev){});             // 键盘按键按下事件
  2. graph.on('keyup', function(ev){});               // 键盘按键抬起事件
  3. graph.on('wheel', function(ev){});               // 滚轮事件
  4. graph.on('beforechangesize', function(ev){})     // 画布尺寸变化前
  5. graph.on('afterchangesize', function(ev){})      // 画布尺寸变化后
  6. graph.on('beforeviewportchange', function(ev){}) // 视口变化前
  7. graph.on('afterviewportchange', function(ev){})  // 视口变化后
  8. graph.on('beforechange', function(ev){})         // 子项数据变化前
  9. graph.on('afterchange', function(ev){})          // 子项数据变化后

find

查询

  1. graph.find(id);

参数
id`` {string} 项 id

返回
item`` {object || undefined}

查询成功返回项对象，否则返回 undefinde``

示例

  1. // 查询 id 为 node1 的项
  2. graph.find('node1')

add

新增项

  1. graph.add(type, model)

参数
type{string} 项类型 可以是 node 、edge、guide
model`` {object} 数据模型

示例

  1. // 添加一个节点
  2. graph.add('node', {
  3.     x: 50,
  4.     y: 50
  5. })

remove

删除项

  1. graph.remove(item)

参数
item`` {string || object} 项 id 或 项对象

示例

  1. // 删除 id 为 node1 的项
  2. graph.remove('node1')
  4. // 删除 node1 项
  5. const node1 = graph.find('node1');
  6. graph.remove(node1);

update

更新项

  1. graph.update(item, model)

参数
item{string || object} 项 id 或 项对象<br />model {object} 数据模型

示例

  1. // 将 id 为 node1 的项 x 更新为 100
  2. graph.update('node1', {
  3.     x: 100
  4. });
  6. // 将 node1 项 x 更新为 100
  7. const node1 = graph.find('node1');
  8. graph.update(node1, {
  9.     x: 100
  10. }));

node

参数

mappingObject {object} 映射对象

为了提高效率，数据导入、导出简单一致，G6 2.0 中取消映射数据和原始数据的隔离，并把映射的泛化为一般的映射概念，用户可以往里面写入任何值，任何映射规则。例如：

  1. graph.node({
  2.   custom: customValue
  3. });

每种映射通道都支持，单值和回调函数 ，例如：

  1. graph.node({
  2.   color: 'red',
  3.   size(model) {
  4.     if (model.type === 'a') {
  5.       return 10;
  6.     }
  7.     return 20;
  8.   }
  9. });

默认图形，支持以下几个视觉通道：

  1. /**
  2.  *节点颜色映射
  3.  *@param  {string|function} param 支持通用颜色
  4.  */
  5. graph.node({
  6.     color: param
  7. });
  9. /**
  10.  *节点尺寸映射
  11.  *@param  {number|array|function} param
  12.  *Number 长宽均为该值
  13.  *Array [width, height] 长宽
  14.  */
  15. graph.node({
  16.     size: param
  17. });
  19. /**
  20.  *节点形状映射
  21.  *@param  {string|function} param
  22.  */
  23. graph.node({
  24.     shape: param
  25. });
  27. /**
  28. *节点文本映射
  29. *@param  {string|function|object} param
  30. */
  31. graph.node({
  32.     label: param
  33. });
  35. /**
  36.  *节点样式映射
  37.  *@param  {object|function} param
  38.  */
  39. graph.node({
  40.     style: param
  41. });

返回
mapper`` {object} 节点映射器

edge

参数

mappingObject {object} 映射对象

为了提高效率，数据导入、导出简单一致，G6 2.0 中取消映射数据和原始数据的隔离，并把映射的泛化为一般的映射概念，用户可以往里面写入任何值，任何映射规则。例如：

  1. graph.edge({
  2.   custom: customValue
  3. });

每种映射通道都支持，单值和回调函数 ，例如：

  1. graph.edge({
  2.   color: 'red',
  3.   size(model) {
  4.     if (model.type === 'a') {
  5.       return 10;
  6.     }
  7.     return 20;
  8.   }
  9. });

默认图形，支持一下几个视觉通道：

  1. /**
  2.  *边颜色映射
  3.  *@param  {string|function} param 支持通用颜色
  4.  */
  5. graph.edge({
  6.     color: param
  7. });
  9. /**
  10.  *边粗细映射
  11.  *@param  {number|function} param
  12.  */
  13. graph.edge({
  14.     size: param
  15. });
  17. /**
  18.  *边形状映射
  19.  *@param  {string|function} param
  20.  */
  21. graph.edge({
  22.     shape: param
  23. });
  25. /**
  26.  *边文本映射
  27.  *@param  {string|function|object} param
  28.  */
  29. graph.edge({
  30.     label: param
  31. });
  33. /**
  34.  *样式映射
  35.  *@param  {object} param
  36.  */
  37. graph.edge({
  38.     style: param
  39. });

返回
mapper`` {object} 边映射器

group

参数

mappingObject {object} 映射对象

为了提高效率，数据导入、导出简单一致，G6 2.0 中取消映射数据和原始数据的隔离，并把映射的泛化为一般的映射概念，用户可以往里面写入任何值，任何映射规则。例如：

  1. graph.group({
  2.   custom: customValue
  3. });

每种映射通道都支持，单值和回调函数 ，例如：

  1. graph.group({
  2.   label: 'group',
  3.   style(model) {
  4.     if (model.type === 'a') {
  5.       return {
  6.         stroke: 'red'
  7.       };
  8.     }
  9.     return {
  10.       stroke: 'blue'
  11.     };
  12.   }
  13. });

默认图形，支持一下几个视觉通道：

  1. /**
  2. *群组文本映射
  3. *@param  {string|function|object} param
  4. */
  5. graph.group({
  6.     label: param
  7. });
  9. /**
  10. *群组样式映射
  11. *@param  {object|function} param
  12. */
  13. graph.group({
  14.     style: param
  15. });

返回
mapper`` {object} 群组映射器

getDomPoint

通过图坐标获取 dom 坐标。

  1. graph.getDomPoint(graphPoint)

参数
graphPoint`` {object} 图坐标

返回
domPoint`` {object} dom 坐标

示例

  1. // 获取画布上图坐标为 (50, 50) 的 dom 坐标
  2. graph.getDomPoint({
  3.     x: 50,
  4.     y: 50
  5. });

getPoint

通过 dom 坐标获取图坐标。

  1. graph.getPoint(domPoint)

参数
domPoint`` {object} dom 坐标

返回
graphPoint`` {object} 图坐标

示例

  1. // 获取画布上 dom 坐标为 (50, 50) 的图坐标
  2. graph.getPoint({
  3.     x: 50,
  4.     y: 50
  5. });

focusPoint

聚焦某点，即将视口中心移动到该点

  1. graph.focusPoint(graphPoint);

参数
graphPoint`` {object} 图坐标

示例

  1. // 将画布中心聚焦到图坐标 (50, 50)
  2. graph.focusPoint({
  3.     x: 50,
  4.     y: 50
  5. });

focus

聚焦某项

  1. graph.focus(item)

参数
item`` {string || object} 项 id 或 项对象

示例

  1. // 将画布中心聚焦到 id 为 node1 的项中心
  2. graph.focus('node1');
  4. // 将画布中心聚焦到 node1 项中心
  5. const node1 = graph.focus('node1');
  6. graph.focus(node1);

zoom

画布缩放

使用方法（一）

  1. graph.zoom(scale);  // 以画布中心，进行缩放

参数
scale`` {number} 缩放比率

示例

  1. // 以画布中心为缩放点，将画布缩放到实际尺寸的 1/2
  2. graph.zoom(0.5);

使用方法（二）

  1. graph.zoom(graphPoint, scale);  // 以图坐标 point 中心，进行缩放

参数
graphPoint{object} 缩放中心<br />scale {number} 缩放比率

示例

  1. // 以图坐标 (100, 100) 为缩放点，将画布缩放到实际尺寸的 1/2
  2. graph.zoom({
  3.     x: 100,
  4.     y: 100
  5. }, 0.5);

translate

平移画布

  1. graph.translate(dx, dy);

参数
dx{number} 右方向为正，平移 dx 距离<br />dy {number} 下方向为正，平移 dy 距离

示例

  1. // 画布向右平移 50，向下平移 50
  2. graph.translate(50, 50);

changeSize

改变画布尺寸

  1. graph.changeSize(width, height);

参数
width{number} 画布宽 <br />height {number} 画布高

示例

  1. // 将画布尺寸修改为 500 * 500
  2. graph.changeSize(500, 500);

setFitView

适应视口

  1. graph.setFitView(fitView);

参数
fitView`` {string} 参数同 fitView

示例

  1. // 将图相对于画布居中
  2. graph.setFitView('cc');

getZoom

获取画布缩放比率

  1. graph.getZoom();

返回
scale`` {number} 缩放比率

getWidth

获取画布宽

  1. graph.getWidth();

返回
width`` {number} 画布宽

getHeight

获取画布高

  1. graph.getHeight();

返回
height`` {number} 画布高

getItems

获取图内所有项

  1. graph.getItems();

返回
items`` {array} 所有项

getNodes

获取图内所有节点

  1. graph.getNodes();

返回
nodes`` {array} 节点集

getEdges

获取图内所有边

  1. graph.getEdges();

返回
edges`` {array} 边集

getGroups

获取图内所有群组

  1. graph.getGroups();

返回
groups`` {array} 群组集合

getGuides

获取图内所有导引

  1. graph.getGuides();

返回
guides`` {array} 导引集合

preventAnimate

阻止动画，回掉函数中的执行代码，将不会做动画。

  1. graph.preventAnimate(callback);

参数
callback`` {function} 无动画执行函数