1.0.3 • Published 3 years ago
relationviewer v1.0.3
基于d3.js构建的知识图谱插件
1、安装
npm i relationviewer
2、引入对象
import { RelationViewer } from "relationviewer";
import "relationviewer/lib/RelationViewer.css";
<div id="smartChart" class="smart-chart"></div>
3、基本使用
let data = {
nodes: [{
name: "钱3",
ETNAME: "PERSON",
EID: "43010119000222224",
ETLEVEL: 1,
ETID: 1,
id": 37204799
}, {
name: "刘6",
ETNAME: "PERSON",
EID: "43010119000102222",
ETLEVEL: 2,
ETID: 1,
id: 46398089
}],
"links": [{
description: "爷爷",
source: 46398089,
type: "家庭关系",
RID: "5615",
target": 37204799
}, {
description: "爷爷",
source: 46398089,
type: "家庭关系",
RID: "5617",
target": 47253841
}, {
description: "奶奶",
source: 46395670,
type: "家庭关系",
RID: "5590",
target: 47253841
}]
}
let rv = new RelationViewer(
data,
{el: "#smartChart", nodeStyle: {r: 58}}
);
4、初始化参数
RelationViewer(obj, option)
obj: {
nodes: [node, node, node],
links: [link, link, link]
};
node = {
name: "汤姆", 实体名称
ETNAME: "PERSON", 实体类型名称
EID: "43010119000102222", 实体id(身份证id,资产唯一id)
ETLEVEL: 2, 实体级别(用于区分实体的颜色,1表示主实体,2表示普通实体),
ETID: 1, 实体类型id(数据库中的实体类型id,用于业务),
id: 37204799 知识图谱数据唯一id,用于界面展示
}
link = {
description: "母亲", 描述,
source: 46395670, 来源实体id(图谱唯一id,与实体的id一致),
type: "家庭关系", 关系类型(中文名称),
RID: "5590", 关系类型id,
target: 47253841 目标实体id(图谱唯一id,与实体的id一致)
}
option = {
el: "#smartChart", 挂载节点,必填
width: el.parent.clientWidth, 默认父节点的宽
height: el.parent.clientHeight, 默认父节点的高
nodeStyle: {
r: 80 节点半径大小
},
linkStyle: { 关系连线
color: "#256fff", 颜色
opacity: 0.6, 透明度
width: 2 线宽
},
linkNameStyle: { 关系名称
color: "#f00", 颜色
fontSize: 16, 字体大小
fontWeight: "bold", 粗细
opacity: 0.4 透明度
},
arrowStyle: { 箭头
color: "#0a3da3", 颜色
opacity: 0.6, 透明度
},
moveLineStyle: { 自定义连线
color: "#999", 颜色
opacity: 0.6, 字体大小
width: 2, 线宽
dashStr: "10, 10" 线段,当设置直线时,可以设置为 "0, 0"
},
btnGroupShow: true, 是否显示按钮组
nodeRatio: { 节点比例大小
special: 1, 主实体
normal: 0.8 其他实体
},
hoverOpacityStyle: { 鼠标移动对应节点,高亮透明度
hide: 0.2, 其他节点透明度
show: 1 当前节点透明度
}
}
5、回调事件
1. 点击关系名称事件
rv.toUpdateLinkName = (linkInfo, $node) =>{
console.log(linkInfo, $node)
}
2. 点击节点详情事件
rv.toNodeDetail = (nodeInfo) => {
console.log(nodeInfo)
}
3. 点击节点删除事件
rv.toDeleteNode = (nodeInfo) => {
console.log(nodeInfo)
//验证用户是否真正删除关系
}
4. 点击节点连线,生成节点关系
rv.toAddLink = (sourceNodeInfo, targetNodeInfo) => {
console.log(sourceNodeInfo, targetNodeInfo)
//将两个节点,前端生成输入关系名称,发送到后台,后台生成关系实体,
//再调用addLink(),界面生成关系
}
6、操作方法
1. 添加实体关系
dr.addLink(link)
2. 添加实体对象
dr.addNode(node, link | links); //links 为link组成的数组
3. 删除实体关系
dr.deleteLink(linkInfo)
4. 删除实体对象
dr.deleteNode(nodeInfo)
5. 获取当前所有数据
dr.getData()
6. 判断节点间存在相同的关系ByEID
dr.isExistRelationByEID(link | linkInfo)
7. 判断节点间存在相同的关系ById
dr.isExistRelationById(link | linkInfo)
8. 修改实体间关系
dr.updateNodeLinkName(link, $node)
9. 缩放界面
dr.changeScale(scale) // 数字类型 1.2
7. 节点样式
覆盖对应的css类即可,不使用scoped样式。