🎉 AntV Graphin 2.0 来啦～

还记得去年 AntV 11.22 开源日 发布的图可视分析解决方案白皮书吗？方案都肯定了，就差一个程序员来实现来，这不，Graphin2.0 它来啦～ Graphin 2.0 版本是继 1.6.4 版本后的一个大版本升级，它将为你们带来三个主要变化：开箱即用的功能，全新架构升级，集成解决方案，让咱们快来看一下吧～

01.开箱即用的功能

1.1 🎨  高颜值元素，规范的样式配置。

Graphin 对于图元素的视觉映射作了规范化处理。一个 Graphin 内置节点包含：容器，标签，光晕，图标，徽标 5 部分，每一部分都可以经过数据驱动。内置的边包含：路径，标签，光晕 3 部分，同时针对业务中经常使用的标签背景，自环，多边，虚线等，也有相应的数据样式配置。在线体验

1.2 📦  自动布局，轻松应对复杂场景

Graphin 内置 10 款网图布局，4 款树图布局，知足你对于不一样数据类型，不一样分析场景的布局需求。针对复杂业务场景下的布局切换，动态布局，子图布局等，均能经过数据驱动布局，轻松实现。在线体验

1.3 📝  细腻交互，轻松自定义

Graphin 提供了 13 种交互组件。包括画布的缩放，平移，圈选，拉索，自动 Resize，也包括元素的拖拽，选中，悬停，高亮，展开收起等，知足你对于不一样分析场景的交互需求。在线体验

1.4 🚀  丰富组件，源于业务沉淀

目前 Graphin 提供了 7 种分析组件：分别为右键菜单，提示框，小地图，工具栏，鱼眼放大镜，轮廓，图例。将来将提供 26+ 的分析组件。在线体验

02.全新架构升级

看完了功能特性，咱们接着介绍 Graphin 2.0 的重要变化：架构升级。过去一年，Graphin 支持了内部和外部的不少重要图分析产品，经过开发者反馈，Graphin 架构存在首要矛盾是与底层图可视化引擎 G6 的协同：元素样式，布局，交互，自定义机制，都存在很大差异，经常使用户感到困惑。所以 2.0 做为一个大版本就是去解决这个问题。

2.1 解决一致性问题

Graphin 最基本的一个要求是做为 G6 上层的一个 React 封装库。而后由于历史缘由，Graphin@1.0 刚开始作的时候，G6@3.0也刚刚起步，业务实践中须要的交互组件，布局能力，图算法，标准元素样式，这些 Graphin 都先在组件层作了，所以产生使用机制不一致的问题。
Graphin2.0 在使用方式上，支持 G6 的参数透传，这意味着开发者很容易将原生的 G6 开发项目迁移到 Graphin 中。在注册机制上，Graphin 放弃了原先的自定义机制，彻底依靠 G6 的原生注册方式，这让开发者更容易理解，不带来额外学习成本。

2.2 完善数据驱动

数据驱动 是 React 组 件的重要特性，Graphin 也不例外，甚至是以此产生强大能力。好比咱们在画布上添加或者删除节点，一般都会考虑不少问题，好比新增多个节点应该放在什么位置？会不会对原先的布局产生影响？而使用 Graphin 时，咱们就不须要考虑这么多，只须要告诉 Graphin 你须要渲染的数据是什么就能够。增长节点不用使用 graph.add(node)，删除节点也不用调用 graph.remove(node)，一切都是改变数据 props.data 便可。
在 2.0 中，咱们对布局的数据驱动作了优化，能够根据数据变化，轻松实现子图布局，动态布局，布局切换，预设布局。对元素的样式和状态，也作了优化，支持初始化状态，临时状态，元素状态更新等。

2.3 性能优化

Graphin2.0 升级到 G6 的最新版本，同时在内部作了计算优化，提升了渲染性能。在包体积方面，也将内置的字体资源单独拆包为 @antv/graphin-icons ，方便用户按需引入。

针对以前 issue 提到的 400 节点卡顿问题，2.0 目前 FPS 接近 60，比 1.x 版本提升 1 倍

2.4 开放的组件机制

Graphin2.0，组件层最大的变化是不集成任何 UI 库。解决以前 1.x 版本有 material-ui，fusionUI 用户的反馈的 UI 自定义问题。同时 Graphin2.0 提供更好的组件自定义机制。好比 ContextMenu，用户其实期待的是，Graphin 是否能够告诉我，这个右键点击发生的节点数据，坐标位置。至于 UI 渲染，彻底交给用户去作就能够了。其本质是将复杂逻辑内置，自定义的 UI 渲染开放。以下图自定义组件，能够在线体验

2.5 更好的开发体验

2.0 文档采用优秀的 dumi 进行网站搭建，用户能够在文档中直接看到源码渲染的组件示例。同时结合 Typescript，有更好的开发体验。

03. 解决方案集成

除了基础能力下沉到 G6，作“薄”。Graphin 2.0 版本最须要回答的是“如何作好一个图分析应用”，所以《解决方案白皮书》是咱们的一个尝试，咱们试图从用户的需求入手，一步步拆分需求，汇总造成技术方案。这一部分也是 Graphin 将来须要重点发力的地方。

3.1 关系扩散

在金融风控领域，有针对个案进行分析探查， 在知识图谱应用领域，须要对知识进行推理。关系扩散是很是重要的一个分析方法，其共同特色：关系扩散的过程当中，节点布局位置可预测，扩散过程稳定可持续，扩散的结果可回溯。

使用 Graphin，能够轻松达到业务指望效果，在线体验

3.2 大图分析

在图数据库应用产品中，原始的关系数据量每每很是大，这个查询出来的数据的可读性带来很大的挑战。除了服务层作数据过滤，前端也能够经过一些聚类算法进行节点的聚合，再经过数据下钻的方式，下钻动态探索。详细方案，可在线查看

04.谁在使用 Graphin

Graphin2.0 是严格意义上的第一次正式对外发声，所以咱们须要向用户介绍，谁在使用 Graphin，以此帮助人们进行技术选型。
国外商业公司有 Cylynx 公司，利用 Graphin 开箱即用的功能，快速搭建他们的  Motif  图分析平台。利用风险监控来打击财务欺诈，经过跨链分析了解虚拟资产链上的活动。他们也参与 Graphin2.0 的官网建设。

国内商业公司有 360 将来研究院，利用 Graphin 分析固件安全性问题，建设网络安全可视化。

更多的用户来自 后端开发，数据开发，算法开发同窗。Graphin 提供开箱即用的能力，可以快速帮助他们进行关系数据分析。咱们在 github 也开了一个 issue：who uses graphin ，来帮助更多后来者进行技术选型与产品案例交流。

05.总结

咱们所处的 世界是一个互联共通的世界，目前图分析已经被普遍被用在金融反欺诈，公共安全，基础设施监控，智慧医疗等领域。Graphin 但愿可以在关系数据的探索上找到一条道路，可以帮助开发者提效，为业务赋能，感兴趣的同窗，能够一块儿交流共建。最后附上连接，若是对你的业务有帮助，还请帮忙点个 star 哦

• AntV Graphin Github：https://github.com/antvis/Graphin
• AntV Graphin 官方站点：https://graphin.antv.vision/
• AntV G6 Github：https://github.com/antvis/G6
• AntV G6 官方站点： https://g6.antv.vision/zh/
• 优秀的文档工具 dumi： https://github.com/umijs/dumi