蚂蚁数据可视化 | G6
- 📚前言
- 📚使用说明
- 📕数据规则
- 节点的属性
📚前言
蚂蚁数据可视化 G6 图可视化引擎是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。
GraphInsight 图的分析洞察是基于 G6 图可视化引擎封装开发的一款图分析应用的低代码搭建平台。用户无需代码开发，即可在线完成关系数据的通道映射，自主布局，探索分析。基于 G6 强大图可视分析能力，以及 Graphin 的组件组合能力，用户还可一键导出配置代码，生成SDK，集成到业务系统中，大大降 低初始研发门槛 与 后续维护成本。
国内项目 Graphin 地址：https://gitee.com/antv/graphin
G6 文档地址：https://g6.antv.vision/zh/docs/manual/introduction
GraphInsight 自定义文档地址：https://www.yuque.com/antv/gi/iwiv6g
银行反洗钱案例地址：https://graphinsight.antgroup.com/#/workspace/demo-bank?nav=data
📚使用说明
📕数据规则
在服务中心可以看到 GraphInsight 官方数据服务是存储在浏览器 IndexDB ，其对象为 localforage 可以存储大概 5MB 的数据，其中包括有两个案例数据：供应链漏洞分析 和 银行反洗钱分析。
这两份数据正好对应行业案例里的两个案例，通过刷新行业案例的页面可以来获取这两个案例数据的 JSON 文件。不知道你们能不能点开，反正这两个案例项目我点不开。因此为了测试和体验正好可以利用这两个案例的数据。
| 字段 | 必需 | 注释 |
|---|---|---|
| Node ID | ✔️ | 节点 |
| Source | ✔️ | 源节点 |
| Target | ✔️ | 目标节点 |
| Node Type | 节点类型 | |
| Edge Type | 边类型 |
当然数据需要进行处理一下就是保留符合条件的数据，根据上面的表格需要关注的数据为节点 Node 和边 Edge。
符合条件的数据在该文件对应 data.inputData[0].data 中，按上图这样将其他数据删除，保留 data.inputData[0].data 中的 node 和 edges，即下图结果，然后再项目里面上传处理后的数据，就会自动填充到必需字段里面。
node
{
"create_date": "2019-01-03T00:00:00",
"icon": "account_balance",
"id": "account_7",
"is_different_bank": 0,
"data": {},
"defaultStyle": {}
}
id 为节点唯一标识符，后续可以通过这个来定义 source 和 target，来确定这两个节点连接在一起。
data 为该节点的包含的数据，点击节点就会显示该数据，即节点的数据。
{
"amount": 1000000,
"balance": 200000,
"category": "ib_txn",
"date": "2020-01-01T00:00:00",
"id": "ib_txn_1",
"is_foreign_source": 0,
"is_foreign_target": 1,
"is_high_risk_source_target_location": 0,
"relation": "ib_transfer",
"source": "account_103",
"source_owner": "customer_103",
"target": "account_904",
"target_owner": "other_banks",
"time": "00:00:00",
"data": {},
"defaultStyle": {}
}
data 为该边（source 和 target 之间的连线）的包含的数据，即边的数据。
{
"transfunc": "\ndata => {\n const nodes = data.nodes.map(n=>{\n return {\n id:'' + n[\"id\"],\n nodeType: n[\"icon\"],\n nodeTypeKeyFromProperties:'icon',\n data:n\n }\n })\n const edges = data.edges.map(e=>{\n return {\n source:'' + e[\"source\"],\n target:'' + e[\"target\"],\n edgeType: e[\"category\"],\n edgeTypeKeyFromProperties:'category',\n data:e\n }\n })\n return { nodes, edges }\n}\n",
}
inputData 并没有定义 nodeType 字段和 edgeType 字段来说明节点类型和边类型，但是可以使用了 transfunc 来动态将输入数据进行一个转化产生新的数据集，例如上方样例。
节点的属性
| 属性 | 类型 | 必需 | 注释 |
|---|---|---|---|
| id | string | ✔️ | 节点的唯一标识 |
| x | number | 节点位置的 X 值 | |
| y | number | 节点位置的 Y 值 | |
| data | object | 节点的数据 | |
| nodeType | string | 节点类型 | |
| nodeTypeKeyFromProperties | string | nodeType 的映射关系来源的属性字段 | |
| properties | object | 节点的其他属性字段 | |
更多属性参见：G6 内置的节点
