智能图谱解决方案,关系图谱,网络图谱,D3force力导向图,知识图谱可视化,是关系网络中实体与关系与实体的表示,是将复杂的信息通过计算处理成能够结构化表示的数据
npm install relation-network-graphrelation-network-graph
数据图谱初始化、力导向计算、节点布局、渲染
智能图谱解决方案,关系图谱,网络图谱,D3force力导向图,知识图谱可视化,是关系网络中实体与关系与实体的表示,是将复杂的信息通过计算处理成能够结构化表示的数据
>人物关系、互联网关系、图书情报、知识产品、产业链图谱、企业图谱、医疗、汽车等




``bash`
$ npm install relation-network-graph --save
`bash`
$ yarn add relation-network-graph
`bash`
引入静态文件dist/relation-network-graph.js
`js`
import { createContainer } from 'relation-network-graph';
new createContainer(options:ContainerConfig)
ContainerConfig:
成员 | 说明 | 类型 | 是否必须 | 默认值
---|---|---|--- |---
width | 容器宽度 | number | 是 | 1000number
height | 容器高度 | | 是 | 1000string
containerName | 所在容器元素使用id | | 是 | Node[]
nodes | 节点数据 | | 是 | []Link[]
links | 节点间的关系数据 | | 是 | []string
benchmark | 数据基准点以数据的什么属性为基准 | | 否 | idstring
background | 容器背景色 | | 否 | #F7FAFCboolean
isShowMask | 选中某个节点时其他节点是否出现暗淡效果 | | 否 | trueboolean
isCustomMouse | 是否支持节点自定义mouse事件 | | 否 | false(删除、连线、收起、展开等)
toolbarData | 点击节点周围出现扇形区域进行更多功能的操作 | toolbarData[] | 否 | toolbarDatastring[]
colors | 节点颜色集合 | | 否 | colorsstring[]
activeColors | 移入节点时高亮效果 | | 否 | activeColorsFunction(Node)
nodeClick | 点击节点时触发相应函数 | | 否 | Function(Node)
nodeMouseover | 移入节点时触发相应函数(搭配isCustomMouse使用) | | 否 | Function(Node)
nodeMouseout | 移除节点时触发相应函数(搭配isCustomMouse使用) | | 否 | Function(Node)
nodeMove | 节点内移动时触发相应函数 | | 否 | Function(Link)
linkClick | 点击节点间关系线时时触发相应函数 | | 否 | zoomOptions
zoomOptions | 容器缩放配置 | | 否 | 0.5-1.5linkOps
linkOps | 关系线配置 | | 否 | layout
layout | 控制节点的显示,在特定范围内展示 | | 否 |
Node[]:
成员 | 说明 | 类型 | 是否必须 | 可用值
---|---|---|--- |---
id | 唯一id | string|number | 是 | string
name | 节点名 | | 是 | number
color | 节点颜色 | | 否 | [1,2,3]等number
size | 节点大小 | | 否 | [1,2,3]string
shape | 节点形状 | | 否 | 'circle'|'rect'|'ellipse ' Array
props | 属性 | | 否 | boolean
hide | 是否隐藏 | | 是 | false|trueboolean
isExtendedState | 是否是扩展状态 | | 是 | false|true
Link[]
成员 | 说明 | 类型 | 是否必须 | 可用值
---|---|---|--- |---
id | 唯一id | string | 是 | string
label | 关系名称 | | 是 | boolean
hide | 是否隐藏 | | 是 | false|truestring
color | 关系颜色 | | 是 | ['1','2','3']等string
label | 关系名称 | | 是 | string|number
source | 源点基准id | | 是 | string|number
target | 终点基准id | | 是 | number
sourceRadius | 点的半径 | | 是 | number
targetRadius | 点的半径 | | 是 | number
value | 关系线的粗细 | | 是 | number
color | 线条颜色 | | 否 | [1,2,3]等 Array
props | 属性 | | 否 |
zoomOptionsnumber
成员 | 说明 | 类型 | 是否必须 | 可用值
---|---|---|--- |---
minScale | 最小值 | | 是 | 0-10number
maxScale | 最大值 | | 是 | 0-10
linkOpsstring
成员 | 说明 | 类型 | 是否必须 | 可用值
---|---|---|--- |---
stroke | 关系线的颜色 | | 是 | number
stroke-opacity | 关系线的透明度 | | 是 | 0-10
layoutnumber
成员 | 说明 | 类型 | 是否必须 | 可用值
---|---|---|--- |---
x | x轴缩小范围大小 | | 是 | number
y | y轴缩小范围大小 | | 是 | number
simulation | y轴作用力 | | 否 | number
distance | 关系线长度 | | 否 | number` | 是 |
force | 是否开启特定范围内展示 |
IE / Edge |