relation-network-graph
数据图谱初始化、力导向计算、节点布局、渲染
智能图谱解决方案，关系图谱，网络图谱，D3force力导向图，知识图谱可视化，是关系网络中实体与关系与实体的表示，是将复杂的信息通过计算处理成能够结构化表示的数据
应用场景
人物关系、互联网关系、图书情报、知识产品、产业链图谱、企业图谱、医疗、汽车等
在线示例
基础展示
https://haojiey.github.io/relation-network-graph/example/index.html
可操作性功能展示
https://haojiey.github.io/relation-network-graph/example/page/operate.html
自定义可操作性功能展示
https://haojiey.github.io/relation-network-graph/example/page/operateCustom.html
颜色大小配置展示
https://haojiey.github.io/relation-network-graph/example/page/colorSize.html
特定范围内展示
https://haojiey.github.io/relation-network-graph/example/page/range.html
大数据量展示
https://haojiey.github.io/relation-network-graph/example/page/bigData.html
安装
使用 npm 或 yarn 安装
$ npm install relation-network-graph --save$ yarn add relation-network-graph使用静态资源
引入静态文件dist/relation-network-graph.js文档
使用方式
import { createContainer } from 'relation-network-graph';
new createContainer(options:ContainerConfig)配置说明
ContainerConfig：
| 成员 | 说明 | 类型 | 是否必须 | 默认值 |
|---|---|---|---|---|
| width | 容器宽度 | number |
是 | 1000 |
| height | 容器高度 | number |
是 | 1000 |
| containerName | 所在容器元素使用id | string |
是 | |
| nodes | 节点数据 | Node[] |
是 | [] |
| links | 节点间的关系数据 | Link[] |
是 | [] |
| benchmark | 数据基准点以数据的什么属性为基准 | string |
否 | id |
| background | 容器背景色 | string |
否 | #F7FAFC |
| isShowMask | 选中某个节点时其他节点是否出现暗淡效果 | boolean |
否 | true |
| isCustomMouse | 是否支持节点自定义mouse事件 | boolean |
否 | false |
| toolbarData | 点击节点周围出现扇形区域进行更多功能的操作（删除、连线、收起、展开等）
|
toolbarData[] |
否 | toolbarData |
| colors | 节点颜色集合 | string[] |
否 | colors |
| activeColors | 移入节点时高亮效果 | string[] |
否 | activeColors |
| nodeClick | 点击节点时触发相应函数 | Function(Node) |
否 | |
| nodeMouseover | 移入节点时触发相应函数(搭配isCustomMouse使用) | Function(Node) |
否 | |
| nodeMouseout | 移除节点时触发相应函数(搭配isCustomMouse使用) | Function(Node) |
否 | |
| nodeMove | 节点内移动时触发相应函数 | Function(Node) |
否 | |
| linkClick | 点击节点间关系线时时触发相应函数 | Function(Link) |
否 | |
| zoomOptions | 容器缩放配置 | zoomOptions |
否 | 0.5-1.5 |
| linkOps | 关系线配置 | linkOps |
否 | |
| layout | 控制节点的显示，在特定范围内展示 | layout |
否 |
Node[]:
| 成员 | 说明 | 类型 | 是否必须 | 可用值 |
|---|---|---|---|---|
| id | 唯一id | string｜number |
是 | |
| name | 节点名 | string |
是 | |
| color | 节点颜色 | number |
否 | [1,2,3]等 |
| size | 节点大小 | number |
否 | [1,2,3] |
| shape | 节点形状 | string |
否 | 'circle' |
| props | 属性 | Array<any> |
否 | |
| hide | 是否隐藏 | boolean |
是 | false |
| isExtendedState | 是否是扩展状态 | boolean |
是 | false |
Link[]
| 成员 | 说明 | 类型 | 是否必须 | 可用值 |
|---|---|---|---|---|
| id | 唯一id | string |
是 | |
| label | 关系名称 | string |
是 | |
| hide | 是否隐藏 | boolean |
是 | false |
| color | 关系颜色 | string |
是 | ['1','2','3']等 |
| label | 关系名称 | string |
是 | |
| source | 源点基准id | string｜number |
是 | |
| target | 终点基准id | string｜number |
是 | |
| sourceRadius | 点的半径 | number |
是 | |
| targetRadius | 点的半径 | number |
是 | |
| value | 关系线的粗细 | number |
是 | |
| color | 线条颜色 | number |
否 | [1,2,3]等 |
| props | 属性 | Array<any> |
否 |
zoomOptions
| 成员 | 说明 | 类型 | 是否必须 | 可用值 |
|---|---|---|---|---|
| minScale | 最小值 | number |
是 | 0-10 |
| maxScale | 最大值 | number |
是 | 0-10 |
linkOps
| 成员 | 说明 | 类型 | 是否必须 | 可用值 |
|---|---|---|---|---|
| stroke | 关系线的颜色 | string |
是 | |
| stroke-opacity | 关系线的透明度 | number |
是 | 0-10 |
layout
| 成员 | 说明 | 类型 | 是否必须 | 可用值 |
|---|---|---|---|---|
| x | x轴缩小范围大小 | number |
是 | |
| y | y轴缩小范围大小 | number |
是 | |
| simulation | y轴作用力 | number |
否 | |
| distance | 关系线长度 | number |
否 | |
| force | 是否开启特定范围内展示 | number |
是 |
支持环境
 IE / Edge |
 Firefox |
 Chrome |
 Safari |
 Opera |
|---|---|---|---|---|
| 10+ | 52+ | 15+ | 5.1+ | 15+ |