vue+neo4j+(neovis.js / neo4j-driver)纯前端实现知识图谱的集成
- neo4j是什么?
- 一、Neovis.js 不用获取数据直接连接数据库绘图
- 二、vis.js 或者 echarts绘图
- 1、(发现一个神器) neo4j-driver 能够直接通过前端获取数据。
- 2、使用echarts绘图
- 3、使用vis.js绘图
neo4j是什么?
简单来说,这是一种比较热门的图数据库,图数据库以图形形式存储数据。 它以节点,关系和属性的形式存储应用程序的数据。 一个图由无数的节点和关系组成。
安装图数据库在这里就不介绍了,本篇主要介绍如何连接neo4j数据库,将知识图谱成功显示在前端页面中。
一、Neovis.js 不用获取数据直接连接数据库绘图
1.、 Neovis.js与Neo4j的连接非常简单明了,并且Neovis 的数据格式与那neo4j数据库保持一致。在单个配置对象中定义标签、属性、节点和关系的样式和颜色。
首先下载依赖
npm install -save neovis.js
在项目中引用
import NeoVis from 'neovis.js';
创建用来绘图的DOM元素
<div style="height:100%;" ref="Screen">
<div class="left" id="viz1" ref="viz1"></div>
</div> -->
页面加载进来调用draw()画图函数
mounted() {
this.draw();
},
//neovis.js画图
methods:{
draw() {
//获取dom元素
var viz1 = this.$refs.viz1;
//创建veovis实例
var viz;
//配置项
var config = {
container_id: "viz",
//neo4j服务器地址,用户名 和 密码
server_url: "bolt://192.x.xxx.10:7687",
server_user: "nexx4j",
server_password: "KGxxx34",
**///labels是节点央样式的配置:**
**/// caption :节点显示的文字对应内容
**/// community: 节点颜色**
**/// size:节点大小**
**/// font:节点字体大小设置****
**//没有在这个地方配置的节点将会是默认样式**
labels: {
"CITY": { caption: "name", community: "#5496FF", size: 200, font: { size: 35, color: "#606266", }, },
"基本待遇政策": { caption: "name", community: "#5496FF", size: 95, font: { size: 25, color: "#606266", } },
"基本筹资政策": { caption: "name", community: "#5496FF", size: 95, font: { size: 25, color: "#606266", }, },
},
**///relationships是关系线段样式的配置:**
**/// caption :线段显示的文字对应内容
**/// thickness: 线段粗细**
**/// font:节点字体大小设置****
**//没有在这个地方配置的线段将会是默认样式**
relationships: {
"待遇支付政策": { thickness: 1, caption: true, font: { size: 15, color: "#606266", }, },
"待遇主体类别": { thickness: "count", caption: true, font: { size: 15, color: "#606266", }, },
},
//是否显示箭头
arrows: true,
hierarchical: true,
// 分层结构或者默认 "hubsize"(默认)和"directed".
// hierarchical_sort_method: 'hubsize',
hierarchical_sort_method: 'directed',
//配置数据库查询语句,MATCH n RETURN n,尝试过不对,必须用 MATCH p=()-->() RETURN p
initial_cypher: 'MATCH p=()-->() RETURN p',
};
viz = new NeoVis(config);
viz._container = viz1;
viz.render();
},
}
效果图:
二、vis.js 或者 echarts绘图
由于这两者需要的数据格式与neo4j数据格式不同,所以需要先从前端获取数据,然后处理成我们需要的格式。