概述

该文档是 G6 0.X -> G6 1.X 的升级指南文档,如果有你觉得描述的不够清晰的地方,升级有困难的话,敬请联系我们

原来的 Graph 既是现在的 Net

Graph 在 G6 1.0 中已经沉为抽象类,用户不应该直接实例化 Graph 使用。1.0 中 Net 基本含 0.X Graph 所有属性、方法。从 0.X 迁 1.X 的用户应将所有的 Graph 改为 Net。

新的锚点描述

锚点在关系图中无非是一个至关重要的概念,如果 0.X 中你使用了自定义锚点,应参看下文。

过去的锚点,我们定义了上(0)右(1)下(2)左(3),四个边,然后在通过第二个参数确定锚点的位置,如左图所示。这样不仅理解起来复杂,而且还有一个硬伤 —— 锚点无法定义到图形上!在新的锚点机制里,我们以左上角为(0,0)点,将锚点的范围拓展至了整个图形的包围盒平面内,如右图所示:

这样我们不仅能把锚点定义到图形包围盒边上,还能定义到包围盒内图,以做到锚点跟图形精确关联,如下图所示:

再见无穷尽的xxxable

诸如:selectabledragablezoomable,在 1.0 后,应用行为模式的交互插拔机制实现,比如:

0.X 中

var graph = new Graph({
  zoomable: false
});

等于 1.X 中

var net = new Net();
net.removeBehaviour(['wheelZoom']);

行为、模式的插拔组装,参见Demo;

调整初始化视口应该用fitView

0.x 中有时我们会render结束后,调用autoZoom方法,让图适应画布。1.X 中这种方法被废弃,需要在初始化图时配置fitView,以决定初始化时画布的视口。Graph API,fitView 属性。

    

统一输入输出 save && read

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

读入数据 -- read

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

保存数据 -- save

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