G6 官方版 v4.1.4

软件介绍

G6提供可视化绘图功能，可以在软件设计各种图形，可以设计图表，结合交互式的动画功能就可以将图添加到应用程序上使用，在开发图表统计软件和数据分析软件的时候就可以加载这款软件，帮助用户快速设计图形，设计图布局方案，设计交互事件，设计动画，软件编辑功能还是很多的，支持内置节点编辑，支持自定义节点，支持调整节点的连接点，支持内置边、自定义边、Combo机制、内置 Combo、自定义 Combo、高级样式:纹理,背景,渐变、样式更新、层级管理等内容编辑，满足大部分用户设计图表和设计图形的需求!

G6软件功能

G6 作为一款专业的图可视化引擎，具有以下特：

优秀的能：支持大规模图数据的交互与探索;

丰富的元素：内置丰富的节点与边元素，自由配置，支持自定义;

可控的交互：内置 10+ 交互行为，支持自定义交互;

强大的布局：内置了 10+ 常用的图布局，支持自定义布局;

便捷的组件：优化内置组件功能及能;

友好的体验：根据用户需求分层梳理文档，支持 TypeScpt 类型推断。

除了默认好用、配置自由的内置功能，元素、交互、布局均具有高可扩展的自定义机制。

G6软件特色

1、G6提供绘图功能，可以通过这款软件快速建立图形

2、可以在软件编辑关系图，可以在软件加载数据

3、支持图形布局设置，使用内置的图布局方案生成图形

4、可以在软件编辑节点数据，可以添加交互行为

5、支持设置节点或边的背景、更新文本样式、设置渐变色、设置纹理

6、支持更新节点或边的样式、节点与边的层级、显示与隐藏、两节点间存在多条边、锁定/解锁节点

7、支持一般图布局 Layout、树图布局 Layout、布局的切换机制

8、可以选择子图布局、使用 webworker布局、自定义布局 Layout

9、G6 提供了智能布局的能力，引擎会根据查询到的数据，推荐最适合的布局，用户直接使用推荐的布局即可。

G6教程

监听和绑定事件

除了 内置交互行为 Behavior 和 交互模式 Mode 搭配的事件管理方式外，G6 提供了直接的单个事件、时机的监听方法，可以监听画布、节点、边、以及各函数被调用的时机等。这些事件可以分为以下四个层次：

画布、图形层次的事件，mousedown，mouseup，click，mouseenter，mouseleave 等;

节点/边 上的事件，node:mousedown，edge:click 等，以 type:ntName 为事件名称;

时机事件：

节点/边增删改时的事件, 例如：beforeadd，afteradd 等;

节点/边状态改变时的事件：beforerefresh 与 afterrefresh;

布局时机：beforelayout 与 afterlayout。

G6 上所有的事件都需要在 graph 上监听。

内置的 Behavior

什么是 Behavior

Behavior 是 G6 提供的定义图上交互事件的机制。它与交互模式 Mode 搭配使用，如何将下文所述各种 Behavior 配置到图上，见 交互模式。

内置 Behavior

理论上， G6 上的所有基图形、Item(节点/边)都能通过事件来进行作。考虑到通用，G6 目前共提供了以下 14 个内置的 Behavior。此外，用户可以注册 自定义 Behavior。

drag-combo

V3.5 以上版本支持。

含义：拖动 Combo;

配置项：

type: 'drag-combo';

enableDelegate：拖动 Combo 时候是否开启图形代理 delegate，即拖动 Combo 时候 Combo 不会实时跟随变动，拖动过程中有临时生成一个 delegate 图形，拖动结束后才更新 Combo 位置，默认为 false，不开启;

delegateStyle：delegate 的样式;

onlyChangeComboSize：拖动嵌套的 Combo 时，只改变父 Combo 的大小，不改变层级关系，默认为 false;

activeState：当拖动 Combo 时，父 Combo 或进入到的 Combo 的状态值，需要用户在实例化 Graph 时在 comboStateStyles 里面配置，默认为空;

selectedState：选中 Combo 的状态，默认为 selected，需要在 comboStateStyles 里面配置;

shouldUpdate(e)：是否允许当前被作的 combo 被拖拽，参见下面示例。

使用默认配置

用户可根据实际需求，为 activeState 或 selectedState 配置样式：

collapse-expand-combo

V3.5 以上版本支持。

含义：收起和展开 Combo。若图配置有布局，则该 behavior 被触发后会触发图的重新布局。若希望避免重新布局，可以通过监听 combo 点击事件和 graph.collapseExpandCombo API 控制收缩展开逻辑;

配置项：

type: 'collapse-expand-combo';

tgger：触发方式，默认为双击收起或展示，可配置 'click' 和 'dblclick';

relayout：收缩或展开后是否触发重新布局，默认为 true。

使用默认配置

用户可以配置成单击展示或收起：

drag-canvas

含义：拖拽画布;

配置项：

type: 'drag-canvas';

direction：允许拖拽方向，支持'x'，'y'，'both'，默认方向为 'both';

enableOptimize：是否开启优化，开启后拖动画布过程中隐藏所有的边及节点上非 keyShape 部分，默认关闭;

shouldBegin(e)：是否允许触发该作;

scalableRange：拖动 canvas 可扩展的范围，默认为 0，取值为正和负数时的效果如下图所示。

scalableRange的默认值值为0时,dra -canvas-可拖动的范围如下图紫域所示。

当 scalableRange的值大于0时, drag-canvas可拖动的范围如下图红域所示,

即在原 Canvas宽高的基上四周各增加了 scalableRange的范围

当 scalableRange的值小于0时,drag- canvas可拖动的范围如下图绿域所示,

即在原 Canvas宽高的基上四周各减少了 scalableRange的范围

相关时机事件：

canvas:dragstart：画布拖拽开始时触发，使用 graph.on('canvas:dragstart', e => {...}) 监听;

canvas:drag：画布拖拽中触发，使用 graph.on('canvas:drag', e => {...}) 监听;

canvas:dragend：画布拖拽结束后触发，使用 graph.on('canvas:drag', e => {...}) 监听。

使用默认配置

默认配置下，可以在 x 和 y 两个方向上拖动画布。

使用自定义参数

此时只能在 x 方向上面拖动，y 方向上不允许拖动

zoom-canvas

含义：缩放画布;

type: 'zoom-canvas';

配置项：

sensitivity：缩放灵敏度，支持 1-10 的数值，默认灵敏度为 5;

minZoom：最小缩放比例;

maxZoom：最大缩放比例;

enableOptimize：是否开启能优化，默认为 false，设置为 true 开启，开启后缩放比例小于 optimizeZoom 时自动隐藏非 keyShape;

optimizeZoom：当 enableOptimize 为 true 时起作用，默认值为 0.7，表示当缩放到哪个比例时开始隐藏非 keyShape;

shouldUpdate(e)：是否允许发生缩放;

fixSelectedItems：在缩小画布时是否固定选定元素的描边粗细、文本大小、整体大小等，fixSelectedItems 是一个对象，有以下变量：

fixSelectedItems.fixState：将被固定的元素状态，被设置为该状态的节点将会在画布缩小时参与固定大小的计算，默认为 'selected';

fixSelectedItems.fixAll：固定元素的整体大小，优先级高于 fixSelectedItems.fixLineWidth 和 fixSelectedItems.fixLabel;

fixSelectedItems.fixLineWidth：固定元素的 keyShape 的描边粗细;

fixSelectedItems.fixLabel：固定元素的文本大小。

相关时机事件：

wheelzoom(e)：当缩放发生变化时被触发。使用 graph.on('wheelzoom', e => {...}) 监听该时机事件。

提示：若要限定缩放尺寸，请在 graph 上设置 minZoom 和 maxZoom。

drag-node

说明： V3.5 以上版本才支持拖动 Combo 中的节点。

含义：拖拽节点，或拖动 Combo 中的节点;

配置项：

type: 'drag-node';

delegateStyle：节点拖拽时的绘图属，默认为 { stkeOpacity: 0.6, fillOpacity: 0.6 };

updateEdge：是否在拖拽节点时更新所有与之相连的边，默认为 true 。

enableDelegate：拖动节点过程中是否启用 delegate，即在拖动过程中是否使用方框代替元素的直接移动，效果区别见下面两个动图。默认值为 false;

onlyChangeComboSize：V3.5 及以上版本支持，拖动节点过程中只改变 Combo 大小，不改变 Combo 结构，即不将节点从 Combo 中拖出或将节点拖入到 Combo 中，默认为 false;

comboActiveState：V3.5 及以上版本支持，拖动节点过程中，如果存在 Combo，节点所在 Combo 或节点进入的 Combo 的状态，需要在实例化 Graph 时候通过 comboStateStyles 进行配置，默认为空;

selectedState：V3.5 及以上版本支持，选中 Combo 的样式，需要在实例化 Graph 时候通过 comboStateStyles 进行配置,默认为 selected;

shouldBegin(e)：是否允许当前被作的节点被拖动;

shouldUpdate(e)：是否允许当前被作的节点在拖动过程中更新自身/ delegate 位置;

shouldEnd(e)：是否允许当前被作的节点在拖拽结束时更新位置。

使用默认配置

启用 delegate