基于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样式。