我们以网络上一份 公开数据集 为例,原始数据是一份「银行卡之间转账关系」的 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:
他们依次对应的包名与解释如下:
文件路径 | 包名 | 说明 |
---|---|---|
packages/gi-assets-advance | @antv/gi-assets-advance |
高级资产包 |
packages/gi-assets-algorithm | @antv/gi-assets-algorithm |
算法资产包 |
packages/gi-assets-basic | @antv/gi-assets-basic |
基础资产包 |
packages/gi-assets-scene | @antv/gi-assets-scene |
场景资产包 |
packages/gi-assets-graphscope | @antv/gi-assets-graphscope |
GraphScope 引擎服务(单机版) |
packages/gi-assets-neo4j | @antv/gi-assets-neo4j |
Neo4j 引擎服务 |
packages/gi-assets-tugraph | @antv/gi-assets-tugraph |
TuGraph 引擎服务 |
packages/gi-cli | @antv/gi-cli |
G6VP 资产 CLI |
packages/gi-common-components | @antv/gi-common-components |
通用组件包 |
packages/gi-sdk | @antv/gi-sdk |
G6VP SDK |
packages/gi-site | - |
G6VP 站点 |
packages/gi-portal | - |
G6VP 首页 |
packages/gi-httpservice | @antv/gi-httpservices |
G6VP BFF 服务 |
G6VP 做为一款技术产品,始终围绕一个问题来设计产品:关系数据从哪儿来?关系数据怎么分析?
- 「服务中心」 用来解决关系数据从哪来的问题:数据可以是本地 Excel 文件,可以是开放 API 接口,抑或是图数据库中的数据。
- 「资产中心」 用来解决关系数据怎么分析的问题:不同的人群,不同的业务,不同的分析场景,使用的分析方案一定是有差异的。 G6VP 创新性地提出了分析能力原子化,资产化。将架构技术的可插拔设计应用于产品上,于是无论是数据来源还是数据分析问题,产品层面表现出来的都是功能高度自由化,可插拔,按需使用。因此可以在产品发展初期不断做加法,而不用担心加的内容过多,导致功能混乱。
- 「开放中心」 用来解决「研发提效」问题,作为基于 AntV 技术栈 G6/Graphin 之上的产品,基本职责是要满足研发提效,极大降低图分析应用的研发门槛,同时提效的同时,也能帮助用户做低成本的 POC 验证。 让我们来一起来看看吧~
在今年 6 月 6 日开放的时候,我们提供了 35 个分析资产,在今天 AntV 的开源日上,再次增加 26 个分析资产。
资产分类 | 6.6(35 个) | 10.25(26 个) |
---|---|---|
布局资产 | 力导布局,圆形布局,径向布局, 网格布局,同心圆布局 | 资金力导,聚类有向分层布局 |
容器资产 | 右键菜单,操作栏,工具栏 | 圣杯布局,模式切换,侧边导航栏, 侧边下拉栏 |
画布交互 | 画布设置,清空画布,下载,视图居中,自适应,自由圈选,放大,缩小 | 布局切换 |
元素交互 | 属性面板,节点提示框,样式设置 | 元素高亮,固定节点,展开收起 |
系统交互 | 版权,加载动画,小地图,画布占位符,快照画廊 | 力导控制器,初始化器,大图概览,新增页签,多画布页签,主题设置 |
数据分析 | 筛选面板,节点图例,路径分析 | 桑基图分析,子图布局,表格模式,信息监测 |
数据查询 | 邻居查询 | Gremlin 查询,Cypher 查询,模版查询 |
算法分析 | 节点聚类,节点相似性,社区发现,节点重要性,模式匹配 | 路径结构分析 |
场景分析 | 地图模式 | 3D 大图 |
工作薄 | 保存分享 | 导出 |
资产数量不是关键,关键的是资产在什么场景下,怎么组合,从而完成业务的分析任务。要想回答这个问题,还需要一些时间的沉淀,这里,我们抛砖引玉,将新增的 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)
的自定义服务包,欢迎大家感兴趣移步查看。
目前官方提供的资产服务接口汇总如下:
资产 ID | 资产名称 | 服务 ID | 服务名称 |
---|---|---|---|
Initializer | 初始化器 | GI_SERVICE_INTIAL_GRAPH | |
GI_SERVICE_SCHEMA | 初始化查询 | ||
查询图模型 | |||
PropertiesPanel | 属性面板 | PropertiesPanel | 查询属性详情 |
NeighborsQuery | 邻居查询 | NeighborsQuery | 邻居查询 |
Save | 保存分享 | Save | 保存图画布的接口 |
LanguageQueryService | 语句查询 | LanguageQueryService | 图语句查询接口 |
ThemeSetting | 主题设置 | AddTheme |
GetTheme UpdateTheme RemoveTheme | 添加主题 获取主题 更新主题 删除主题 |
详情参考「如何使用 GraphScope 开源版引擎」
详情参考「如何使用 TuGraph 数据库」。
详情参考「如何使用 Neo4j 图数据库」。
开放中心 是 G6VP 用来解决「研发提效」问题,作为基于 AntV 技术栈 G6/Graphin 之上的产品,基本职责是要满足研发提效,极大降低图分析应用的研发门槛,同时提效的同时,也能帮助用户做低成本的 POC 验证。 用户在分析页面,点击「导出 SDK」,便可以看到有 4 种导出方式: 其中「云端部署」是主要是配合「GraphScope」使用的,目前暂时仅在阿里集团内部使用。因为开源,我们也支持了导出「NPM」包的方式,支持 Tree Shaking,原生集成到 React 项目中。
注意 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/