应用场景

>人物关系、互联网关系、图书情报、知识产品、产业链图谱、企业图谱、医疗、汽车等



在线示例

$3

$3


$3


$3

$3

$3

安装

$3

``bash
$ npm install relation-network-graph --save
`

`bash
$ yarn add relation-network-graph
`

$3

`bash
引入静态文件dist/relation-network-graph.js
`

文档

$3

`js
import { createContainer } from 'relation-network-graph';
new createContainer(options:ContainerConfig)
`

$3

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'|'rect'｜'ellipse '
props | 属性 | Array | 否 |
hide | 是否隐藏 | boolean | 是 | false|true
isExtendedState | 是否是扩展状态 | boolean | 是 | false|true

Link[]

成员 | 说明 | 类型 | 是否必须 | 可用值
---|---|---|--- |---
id | 唯一id | string | 是 |
label | 关系名称 | string | 是 |
hide | 是否隐藏 | boolean | 是 | false|true
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 | 否 |

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+