概述

本文档是关系图库图 —— G6 的基础使用文档,本文旨在说明 G6 的组成结构,和一些重要的概念属性接口,详细内容请参看API 文档

安装

浏览器引入

<script src="https://a.alipayobjects.com/g/datavis/g6/1.0.6/index.js"></script>

通过 npm 安装

外部用户暂时不提供 npm 安装,阿里集团内部同学,可通过 tnpm i @ali/g6 安装。

结构

图 Graph 是所有上层图类的基类,如:Net 网、 Tree 树,都继承于Graph。与以往不同,1.0 后,Graph 已沉为一个抽象类(Abstract),只实现了基础的功能,定义了接口规范,用户可基于 Graph 进行拓展,但不能直接用于画关系图。以后 G6 里还要容纳更多的关系图如 UML、Flow、Force都将基于 Graph ,详见:Graph API

网图 Net 是 G6 提供的、可用于直接画关系图的、最基础的图类。它不仅能画由一组nodesedges,确定的关系图,还集成了,如:拖拽节点(dragNode)、拖拽画布(dragCanvas)、拖拽边(dragEdge)、节点变形(resizeNode)等等,一系列的基础的编辑交互模式,用户可以比较方便的基于该类,绘制做一个关系图的展示视图或图编辑器。详见:网图指南Net API

树 Tree 是 G6 1.0 发布后,我们尝试封装的第一个的图类。我们精细打磨的树相关的交互,已经提供 20 + 种树的布局,欢迎大家使用!详见Tree DemoTree API

数据

在使用关系图开发的过程中,我们常常需要导出导入数据,以满足关系图的存储、分享、编辑的功能。 G6 1.0 后,我们对这部分的需求做了总结。在 Graph 定义了一对相互对照的接口,read <==> save,后面用户应该严格通过这两个该接口导入导出数据。参看Demo

导入 -- read

导入数据

/**
 * 导入数据
 * @param  {Object}  data   通过save导出的数据
 */
graph.read(data);

导出 -- save

导出数据

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

交互

G6 1.0 为了使用户能复用 G6 内置的交互,并能随意插拔,我们实现了一套由事件组成行为,由行为组成模式的交互机制。用于能通过,graph 上行为、模式、相关的接口,随意组装插拔,交互行为。

事件 -- event

Demo源码

G6 封装了一套基础的鼠标事件。通过graph.on() 绑定,graph.off()解除。

  • 事件对象

    • x 在画布上的坐标x
    • y 在画布上的坐标y
    • domX 相对于画布容器的坐标
    • domY 相对于画布容器的坐标y
    • item 节点或者边
    • shape 当前的形
    • itemType 'node' or 'edge'
    • toEvObj 到达的目标事件对象
  • 事件类型

    • 鼠标点击——click
    • 鼠标按下——mousedown
    • 鼠标起来——mouseup
    • 鼠标移动——mousemove
    • 鼠标移入——mouseenter
    • 鼠标移出——mouseleave

    ……

行为 -- behaviour

行为由事件组成,所描述的交互,比事件更具体,如 拖动节点(dragNode),滚轮缩放画布(wheelZoom),拖动画布(dragCanvas)。用户可以根据自己的需要选择对应的行为。此外 Graph 上还提供了一些简便方法管理行为。详见:Graph API,行为列表详见:Handle API

addBehaviour 添加行为

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

removeBehaviour 添加行为

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

参看Demo

模式 -- mode

大多数行为可以随意相互组合,也有部分行为之间有可能发生矛盾,比如 拖动画布(dragCanvas)行为和多选行为(multiSelect),这个时候需要用户自己维护各种行为集合组成模式,比如拖拽模式(drag)编辑模式(edit),以便管理、切换。

changeMode 切换模式

/**
 * 切换模式
 * @param  {String} modeName   模式名
 */
graph.changeMode(modeName);

参看Demo