标准数据格式
# 标准数据格式
提示
组件库定义了统一的数据Schema，作为数据驱动的标准，业务在使用时，需要按照标准数据格式组织数据，进行前端后交互约定。
# 一、标准数据格式定义
注意
- 标准数据包含节点数据集合和连线数据集合，表示图中的一批实体节点和关联关系，分别用 nodes 和 links 存放集合数据。
- 每个节点对象需要具备id、label、type三个必须属性，也可以带有样式属性 style 和业务数据属性 properties。
- 每个关系对象需要具备id、source、target 三个必须属性，也可以指定关系类型type、关系名称label，以及样式属性 style 和业务数据属性 properties。
{
nodes: [
{ id: 1000, label: '112222333',type:'weixin',style:{y: 300, x: 200} },
{ id: 2000, label: '58877554', type:'qq',style:{y: 100, x: 400} },
{ id: 3000, label: '6554778', type:'douyin',style:{y: 300, x: 600},properties:{date:'2022-12-10'} },
{ id: 4000, label: '吴谋凡', type:'people',tags:['重'],style:{y: 100, x: 800,tagColor:'30,30,220'} },
{ id: 5000, label: '涉案人\n黄某某(新街口)',type:'people',tags:['企','核'],style:{ y: 300, x: 1000},
{ id: 6000, label: '13855465577', type:'phone',style:{y: 300, x: 1400} },
{ id: 7000, label: '15968975545',type:'phone',style:{y: 100, x: 1200} },
{ id: 8000, label: '某某重点案件',type:'anjian',style:{ y: 500, x: 800},properties:{date:'2022-12-10'} },
{ id: 9000, label: '新街口某某小区', type:'position',style:{y: 700, x: 800} }
],
links: [
{ id: 'e-10', source: 1000, target: 2000,type:'vitual', label: '虚拟关系',style:{strokeColor:'220,220,120'} },
{ id: 'e-20', source: 2000, target: 3000,type:'vitual', label: '虚拟关系'},
{ id: 'e-30', source: 3000, target: 4000,type:'vitual', label: '虚拟关系' },
{ id: 'e-40', source: 4000, target: 5000,type:'friend', label: '好友'},
{ id: 'e-50', source: 4000, target: 2000,type:'vitual', label: '使用',style:{lineDash:[5,8,5]} },
{ id: 'e-60', source: 3000, target: 1000,type:'vitual', label: '授权登录',style:{strokeColor:'220,20,20'} },
{ id: 'e-70', source: 5000, target: 3000,type:'vitual', label: '发布视频',properties:{publish_time:'2022-12-15'} },
{ id: 'e-80', source: 5000, target: 6000,type:'vitual', label: '拥有',style:{lineWidth:6} },
{ id: 'e-90', source: 6000, target: 7000,type:'vitual', label: '拨打',},
{ id: 'e-100', source: 7000, target: 4000,type:'vitual', label: '所属'},
{ id: 'e-110', source: 1000, target: 8000,type:'relate', label: '涉案'},
{ id: 'e-120', source: 6000, target: 8000,type:'relate', label: '涉案'},
{ id: 'e-130', source: 8000, target: 9000,type:'relate', label: '案发地'}
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# 二、节点属性说明
| 属性名 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| id | String | 是 | 节点唯一性标识，不可重复 |
| label | String | 是 | 节点显示文字名称 |
| type | String | 是 | 节点分类类型，如：人、事、物、地、案件等类型定义值 |
| style | Object | 否 | 节点样式属性定义，一般是节点个性化的样式数据设置，会覆盖统一配置的样式 |
| properties | Object | 否 | 节点的业务属性，业务应用需要附加在节点上的额外信息，用于业务交互处理 |
# 节点的style样式属性列表
| 属性 | 名称 | 示例值 |
|---|---|---|
| x | X坐标值 | 1000 |
| y | Y坐标值 | 500 |
| shape | 形状 | circle：圆形 polygon：六边形 square：正方形 star：星形 |
| size | 大小 | 40 |
| visible | 是否显示 | true或false |
| showlabel | 是否显示名称 | true或false |
| fillColor | 节点颜色 | rgb色值，如：180,180,220 |
| borderWidth | 边框宽度 | 2 |
| borderColor | 边框颜色 | rgb色值，如：180,180,220 |
| selectedBorderWidth | 选中时边框宽度 | 4 |
| selectedBorderColor | 选中时边框颜色 | rgb色值，如：180,180,220 |
| showShadow | 是否显示阴影 | true或false |
| shadowBlur | 阴影的范围大小 | 30 |
| shadowColor | 阴影的颜色 | rgb色值，如：180,180,220 |
| font | 字体定义 | 如：'normal 14px KaiTi' |
| fontColor | 字体颜色 | rgb色值，如：80,80,80 |
| textPosition | 文字位置 | 居中：Middle_Center，下居中：Bottom_Center，上居中：Top_Center |
| image | 图片路径 | 图片的url路径 |
| tagColor | 角标的颜色 | rgb色值，如：230,80,80 |
| tags | 角标的值 | 如：['毒','盗'] |
# 三、关系属性说明
| 属性名 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| id | String | 是 | 连线的唯一性标识，不可重复 |
| source | String | 是 | 起始节点ID |
| target | String | 是 | 目标节点ID |
| label | String | 否 | 连线显示的关系名称 |
| type | String | 否 | 连线业务类型，如：通话、亲人、朋友、同住、同行等类型定义值 |
| style | Object | 否 | 连线样式属性定义，一般是连线个性化的样式数据设置，会覆盖统一配置的样式 |
| properties | Object | 否 | 连线的业务属性，业务应用需要附加在连线上的额外信息，用于业务交互处理 |
# 关系连线style的样式属性列表
| 属性 | 名称 | 示例值 |
|---|---|---|
| lineType | 连线类型 | straight：直线, hlink、vlink：横竖向折线, hbezier、vbezier：横竖向贝塞尔曲线 |
| lineWidth | 连线的宽度 | 2 |
| visible | 是否显示 | true或false |
| showlabel | 是否显示名称 | true或false |
| showArrow | 是否显示箭头 | true或false |
| arrowType | 箭头类型 | arrow：箭头 triangle：三角形 |
| strokeColor | 连线颜色 | rgb色值，如：120,120,120 |
| labelBackGround | 连线文字背景颜色 | rgb色值，如：250,250,250 |
| selectedColor | 选中时的颜色 | rgb色值，如：230,120,120 |
| background | 连线背景色 | rgb色值，如：180,180,220 |
| font | 字体定义 | 如：'normal 14px KaiTi' |
| fontColor | 字体颜色 | rgb色值，如：80,80,80 |
| lineDash | 虚线间隔 | 连线虚线间隔，如：[3,5] |