G6

概述

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

安装

浏览器引入

<script src="https://gw.alipayobjects.com/os/antv/assets/g6/1.2.8/g6.min.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 提供的、可用于直接画关系图的、最基础的图类。它不仅能画由一组nodes、edges，确定的关系图，还集成了，如：拖拽节点（dragNode）、拖拽画布（dragCanvas）、拖拽边（dragEdge）、节点变形（resizeNode）等等，一系列的基础的编辑交互模式，用户可以比较方便的基于该类，绘制做一个关系图的展示视图或图编辑器。详见：网图指南，Net API。

树

树 Tree 是 G6 1.0 发布后，我们尝试封装的第一个的图类。我们精细打磨的树相关的交互，已经提供 20 + 种树的布局，欢迎大家使用！详见Tree Demo，Tree 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

网图指南