我们以网络上一份 公开数据集 为例，原始数据是一份「银行卡之间转账关系」的 JSON，处理下导出到 Excel 表中，于是得到下图两张 Excel 表，左边是点表（银行卡号），右边是边表（转账关系）。

相信我，即使你将下图表格放大，看清楚每个字段，你可能还是不清楚这个数据表达了什么，因为要理解这个「转账关系」，关键要把它变成我们脑海中天然浮现出的关系网络图，而不是平躺在表格中一个个生硬的「起点」和「终点」的字段标识。

打开 G6VP 官方站点：https://graphinsight.antgroup.com/#/workspace ，点击创建项目，我们将案例数据的两份 Excel 表格导入 G6VP 数据源，通过配置节点和边的类型映射，便能得到一张关系网络图

G6VP 中内置了基础样式，交互，布局设置，所有的配置都可自定义，并能所见即所得反馈给用户。

我们在「组件」栏中，选择加载「筛选面板」，选择「高亮」模式，选择关键业务指标「Phone，Address，Amount」等字段，可以清楚看到该字段在图中数据的统计分析情况。 通过与统计图表交互分析，我们开源发现该数据中，存在同手机号注册，同地址注册的情况，网络中大额资金的转出时间都在凌晨这样的异常情况，稍微有业务经验的朋友就会迅速反应出，这是一个典型的洗钱网络

用户不仅仅可以在 G6VP 上完成关系数据的可视化与可视分析。还可以一键导出 SDK，集成到自己的业务系统中。极大降低图分析应用的研发门槛。

G6VP 采用 pnpm 管理仓库，根据 pnpm 的官方兼容性说明，请提前使用 nvm 切换 Node.js 版本到 14 及其以上。

pnpm install // 会安装全部的依赖，且将子包的产物一次性运行出来

npm run start // 启动 G6VP 站点

项目中 packages 包含以下 9 个 package：

他们依次对应的包名与解释如下：

G6VP 做为一款技术产品，始终围绕一个问题来设计产品：关系数据从哪儿来？关系数据怎么分析？

• 「服务中心」 用来解决关系数据从哪来的问题：数据可以是本地 Excel 文件，可以是开放 API 接口，抑或是图数据库中的数据。
• 「资产中心」 用来解决关系数据怎么分析的问题：不同的人群，不同的业务，不同的分析场景，使用的分析方案一定是有差异的。 G6VP 创新性地提出了分析能力原子化，资产化。将架构技术的可插拔设计应用于产品上，于是无论是数据来源还是数据分析问题，产品层面表现出来的都是功能高度自由化，可插拔，按需使用。因此可以在产品发展初期不断做加法，而不用担心加的内容过多，导致功能混乱。
• 「开放中心」 用来解决「研发提效」问题，作为基于 AntV 技术栈 G6/Graphin 之上的产品，基本职责是要满足研发提效，极大降低图分析应用的研发门槛，同时提效的同时，也能帮助用户做低成本的 POC 验证。 让我们来一起来看看吧～

在今年 6 月 6 日开放的时候，我们提供了 35 个分析资产，在今天 AntV 的开源日上，再次增加 26 个分析资产。

资产数量不是关键，关键的是资产在什么场景下，怎么组合，从而完成业务的分析任务。要想回答这个问题，还需要一些时间的沉淀，这里，我们抛砖引玉，将新增的 26 个资产，总结为六大分析场景介绍如下：

• 「力导控制器」优化力导计算性能，终于可以手动结束烦人的力导抖动了！
• 「固定节点」如果是力导布局下，拖拽节点可设置自动固定，可设置相关联的节点自动跟随
• 「大图概览」可设置画布展示限制，超过限制，提供可视化筛选功能。
• 「3D 大图」一键切换 3D 展示。可与子图交互。

• 「多画布页签」：支持画布新增多个页签的功能
• 「添加页签」：支持圈选节点，或者选中后的节点，通过该资产传送到新画布中

• 「圣杯布局」：支持上下左右 4 个方位的布局设置，支持展开收起功能。受 ChinaVis 启发

• 「表格模式」：支持画布数据用交叉明细表展示，支持双向圈选交互，支持独立页签分屏
• 「初始化器」：支持汇总边设置

• 「Gremlin 查询」：支持 Gremlin 语句查询
• 「Cypher 编辑器」：支持 Cypher 语句查询
• 「模版查询」：支持新增语句模版，支持按模版查询

• 「资金力导」：支持 按照资金的出入金额，设置上下的约束力，从而让力导呈现分层效果
• 「聚类有向分层布局」：可以在有向分层的基础上，增加聚类效果，解决传统 dagre 展示分散问题。

在项目的 POC 阶段，我们可以通过样本数据，利用 G6VP 的可视化分析能力，从而得出一个验证结果：图分析这套东西，能不能解决我的业务问题？一旦验证通过，我们自然不能再使用样本数据了，想要在真实的业务场景中用起来，此时就需要一套标准的全流程图链路，这条链路中涉及关系数据的存储，加工，计算，以及最后的可视化与业务分析。 对于一般的业务决策者而言，面对这条链路显然会沉默很久，因为不仅要考虑新链路带来的技术成本与维护成本，还要考虑实际的效果究竟如何，最终用户是否买单。最最关键的问题还在于，不同的业务场景下，所面临的用户群体是不一样的， 并不是所有的业务都需要标准全链路，比如对于一个算法团队而言，处于成本与实际需要考虑，他们可能只需要图计算而不需要图存储。 G6VP 的服务中心就是来解决这个问题的，对于需要全流程验证的用户，我们提供了蚂蚁集团的 TuGraph，以及社区的 Neo4J 数据库的连接方式， 对于只想体验图计算链路的用户，我们提供了阿里巴巴集团的 GraphScope 图计算引擎的连接方式。最后，对于特殊业务场景，需要完全定制数据服务的用户，我们提供了自定义引擎服务的能力。

我们先来说最重要的能力：支持用户自定义数据服务。 在 G6VP 的产品设计中，分析资产是第一等公民，它决定了如何与用户进行交互与展示，有的分析资产运行起来需要数据接口的协同，比如「邻居查询」资产。用户右键交互查询，需要一个下钻的接口，此时该资产也决定了如何与服务端进行交互与接口规范。 如上图所示，用户右键菜单选择「1 度扩散」的时候，发一起一个服务查询，该服务接口（NeighborsQuery）与当前项目选择的引擎 ID（TuGraph）会拼凑成唯一的服务 ID（TuGraph/NeighborsQuery），从而具体匹配到服务中心里的接口，实现数据查询。 **自定义资产数据服务，其实就是用户按照规范实现每一个分析资产需要的服务接口，然而将这些资产服务打包成一个服务资产包，上传到 GI 站点中即可使用。**在开源仓库中，我们也实现了一个[MyCustomServer](https://github.com/antvis/G6VP/tree/master/packages/my-custom-server) 的自定义服务包，欢迎大家感兴趣移步查看。 目前官方提供的资产服务接口汇总如下：

GetTheme UpdateTheme RemoveTheme | 添加主题 获取主题 更新主题 删除主题 |

详情参考「如何使用 GraphScope 开源版引擎」

详情参考「如何使用 TuGraph 数据库」。

详情参考「如何使用 Neo4j 图数据库」。

开放中心 是 G6VP 用来解决「研发提效」问题，作为基于 AntV 技术栈 G6/Graphin 之上的产品，基本职责是要满足研发提效，极大降低图分析应用的研发门槛，同时提效的同时，也能帮助用户做低成本的 POC 验证。 用户在分析页面，点击「导出 SDK」，便可以看到有 4 种导出方式： 其中「云端部署」是主要是配合「GraphScope」使用的，目前暂时仅在阿里集团内部使用。因为开源，我们也支持了导出「NPM」包的方式，支持 Tree Shaking，原生集成到 React 项目中。

注意 ⚠️： cd 到每个子包的目录时候，一定要注意查看 node 的版本，比如我的默认 node 版本是 12， 切换到 16 装完所有依赖，此时进入到每个子包中， node 的版本自动切换到 12，执行命令是找不到安装的依赖的，所以得重新 nvm use 16，这样就可以了,如果想一劳永逸，可以在 zsh terminal 中设置

nvm alias default v16.17.0

因为我们组件间的依赖关系用 pnpm 管理的，即workspace:*，因此发布到 npm 仓库，可以使用pnpm publish，该命令会自动将workspace:*转化为对应的版本。如果我们是私有仓库，比如阿里内部的 tnpm 仓库， 便可以使用下述 script 命令，将代码发布到 tnpm 仓库中

npm run npm:publish

资产包发布后，如果是公开的，国内用：https://www.jsdelivr.com/ ，国外可用：https://unpkg.com/