揭秘G6图表自定义的真相

「福利」 ✿✿ ヽ(°▽°)ノ ✿：文章最后有抽奖，转转纪念T恤一件，走过路过不要错过，欢迎积极留言哦~

序言

前一段时间，我们风控部门提出了一个“关联图谱”的需求，实现一个平台上人员关联信息的展示，其目的是将用户间的多层级多维度的关联关系可视化、清晰化，从而让审核人员能更快更准确的发现各种违法违规行为，降低平台的遭受风险。

整个需求除了要展示大量的关联数据之外，还要根据确切关联因子或关联uid让对应节点和边的样式发生的变化，鼠标悬浮展示数据等功能，并且有一些图形上的特殊要求。

以下为该需求的基础效果

目前，在前端实现关系数据的可视化上，主要有echarts和G6两个主流的技术，相比于echarts，G6在图的编辑和分析上更胜一筹，它支持各种复杂的交互，且更加侧重于展示更多节点和边的性能，因此我选择了G6来实现“关联图谱”，但在探索过程中发现，单纯的使用内置的图形和交互依旧满足不了需求，但G6还提供了强大的自定义能力，通过这个功能我完美的实现了“关联图谱”的需求，而本篇文章就带大家揭秘一下如何使用G6的自定义功能。

需要了解的基础概念

要了解G6自定义功能，自然要从一些基础概念入手。

上图是G6 3.0的架构图，其底层其实是结合Canvas和SVG来设计的，第二层体现了G6 3.0提供的一些能力，包括图形扩展、状态管理等，第三层则是图的基本构成要素。针对第三层，我画了一幅Graph的层级关系图，根据这个包含关系，我们来逐级了解一些概念。

图表Graph

Graph 是 G6 图表的载体，所有的 G6 节点实例操作以及事件，行为监听都在 Graph 实例上进行，其下包括一个或多个图形分组group。

Graph 的生命周期主要有五个：初始化—>加载数据—>渲染—>更新—>销毁。五个生命周期对应五个方法：G6.Graph、data(data)、render()、changeData(data)、clear()

图形分组Group

图形分组 group 类似于 SVG中的标签：元素 g 是用来组合图形对象的容器。在 group 上添加变换（例如剪裁、旋转、放缩、平移等）会应用到其所有的子元素上。

在 G6 中，Graph 的一个实例中的所有节点属于同一个变量名为 nodeGroup 的 group，所有的边属于同一个变量名为 edgeGroup 的 group。节点 group 在视觉上的层级（zIndex）高于边 group，即所有节点会绘制在所有边的上层。

如下图所示，三个节点属于 nodeGroup  ，两条边属于 edgeGroup，nodeGroup 层级高于 edgeGroup ，三个节点绘制在三条边的上层。

元素item

元素Item 是 Node，Edge，Guide等图项的抽象类。

其中最常用的图项有两个，节点(node)和边(edge)。

节点的基本结构node：

边的基本结构edge：

形状shape

Shape 指 G6 中的图形、形状，它可以是圆形、矩形、路径等。G6 中的每一种节点或边由一个或多个 Shape 组成。内置节点的有 'circle'， 'rect'，'ellipse'，...；内置边的有 'line'，'polyline'，'cubic'，...；你可以通过将几个内置shape结合，组成一个能够满足自己需要的图形；

下图就是一个由circle和text两个shape组合而成的图形。

要自定义节点/边时，需要了解shape的生命周期方法，对其方法进行有选择性的复写。

<