通过上述表格对比就可以看出来，对于构建更为复杂的树、图等，G6 具备明显的优势，而且又有活跃的开源社区，为后续的维护升级提供了保证。

　　下面是关于本次双树流转绘制的几个核心概念，简单介绍一下，如有兴趣，还是建议阅读 G6 官方 API 文档

　　通过 new G6.Graph (config) 进行图的实例化。其中参数 config 是 Object 类型的图的配置项，图的大部分功能可以通过该配置项进行全局配置。

　　//使用G6.registerNode自定义节点，在自定义节点中可以自定义各种形状的图形，包括text等

　　// 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性

　　constshape = ev.target;// 被点击的图形，可根据该信息作出不同响应，以达到局部响应效果

　　constshape = ev.target;// 被点击的图形，可根据该信息作出不同响应，以达到局部响应效果

　　constshape = ev.target;// 被点击的图形，可根据该信息作出不同响应，以达到局部响应效果

　　要求数据中每一个节点必须有 id，且 id 为字符串类型。module 字段 root 表示根节点，right 表示子节点，left 表示父节点。flowCountList 表示边，从某个节点到某个节点

　　如果需要加 Minimap 可以在画布外层 div 中增加一个 div#minimap，将小地图放入其中。下面配置中 delegate 表示小地图只渲染画布中元素的框架，以此来降低性能损耗。

　　layout 中 getSide 方法会根据数据类型判断当前节点属于父节点还是子节点，本方法只针对根节点有效。

　　自定义节点是在默认节点不能满足我们的需求时，自己定义一些图形要素，可以单个的也可以是多个进行组合，如下图所示：

　　由于篇幅有限，以下代码只展示了外边框和眼睛图标的绘制，其他元素的绘制基本类似。其中 setState 回调方法是监听状态变化的，比如本例中监听树节点展开 / 收起，进行眼睛图标的切换以及节点底色的变更逻辑。

　　当点击节点中的眼睛图标则执行展开 / 收起，并更新其状态，进行重绘。状态更新之后，上文中的 setState 回调函数就被出发，随后根据新的展开 / 收起状态对节点样式进行变更

　　边的默认样式使用内置边 cubic-horizontal 类型，当鼠标移到边上时会出现一个数量数据如下图所示：

　　当状态变为激活状态 active 时，将边上的元素透明度置为 1 可见，否则置为 0 不可见。默认为 0

　　name:edge-count,// 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性

　　配置如下 indented 表示缩进树，dropCap 置为 false 表示关闭下垂树，只有右侧树时，显示正常，如果双树渲染，左侧树不会缩进，属于 g6 本身的 bug

　　由于我本地 ts 版本太低，导致 ts 在对 g6 进行代码检查时报错，具体报错信息如下截图：

　　（2）. 升级 ts 版本，将当前使用的 3.5.3 升级至最新版，发现虽然上述问题解决了，但是系统中其他地方有报错，为了降低上线的风险，放弃了这种方式

　　（3）. 降级 @antv/g6 的版本，使其从最新版本降到了 4.3.4，最后发现可行，编译没有任何问题，而且功能运行正常clash关闭全局代理，体验较差的是 @antv/g6 关于每一个版本的升级都没有提及这个问题，所以需要按版本试验，整整折腾了一天才找到这个版本，后续如果有人遇到这个问题可以进行借鉴