还记得去年 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