neo4j知识图谱的基本使用与vue的渲染数据展示

Intelleee

已于 2024-04-29 20:06:27 修改

阅读量1.5k

点赞数 29

文章标签： neo4j 知识图谱人工智能

于 2024-04-29 20:02:47 首次发布

本文链接：https://blog.csdn.net/weixin_72775126/article/details/138323070

版权

环境配置：

.csv格式的数据导入

首先把excel数据.xlsx转.csv:

.cypher数据导入本地

vue的数据展示

效果图：

环境配置：

需要下载JDK和安装Neo4j ,并分别配置到环境变量中，具体过程不再赘述

下载地址：

Neo4j Deployment Center - Graph Database & Analytics

Java SE 的 |Oracle 技术网 |神谕 --- Java SE | Oracle Technology Network | Oracle

版本对应参考：（我的版本是JDK11和neo4j-community-4.4.32）

启动（命令行输入）

neo4j console

打开网址：http://localhost:7474/

数据库数据位置：

.csv格式的数据导入

首先把excel数据.xlsx转.csv:

新建一个空白的Excel文件，右击左下角的Sheet 1，点击“查看代码”

输入代码直接运行即可批量转换

Sub xls2csv()
Application.DisplayAlerts = False
t = ActiveWorkbook.Name
mypath = ActiveWorkbook.Path & "\"
myfile = Dir(mypath & "*.xlsx")
Do Until Len(myfile) = 0
If myfile <> t Then
Workbooks.Open Filename:=mypath & myfile
ActiveWorkbook.SaveAs Filename:=mypath & Left(myfile, InStr(myfile, ".") - 1) & ".csv", FileFormat:=xlCSVUTF8
End If
If myfile <> t Then ActiveWorkbook.Close
myfile = Dir
Loop
Application.DisplayAlerts = True
End Sub

将.csv数据导入neo4j后导出为 .cypher文件格式

.cypher数据导入本地

将.cypher放在import路径下

在.conf中添加：apoc.import.file.enabled=true

输入命令行运行即可导入数据

CALL apoc.cypher.runFile("export01.cypher") YIELD row
RETURN row

vue的数据展示

引入：

先安装依赖：npm install -save neo4j-driver

import * as echarts from 'echarts';

// 引入neo4j-driver

import neo4j from 'neo4j-driver'

// 页面引入：

var neo4j = require("neo4j-driver");
export default {

}

// 页面初次加载调用 this.executeCypher() 执行 Cypher 查询数据

mounted() {
var query= 'MATCH p=()-->() RETURN p'
this.executeCypher(query);
},

// executeCypher()方法定义：该方法处理的数据格式为echarts适用格式

/**
* 直接执行Cypher
*/
executeCypher(query) {
this.echartsNode = [] //节点数组
this.nodesRelation = [] //关系线数组
this.category = [] //echarts图例数据数
// 创建实例
this.driver = neo4j.driver('bolt://localhost:7687', neo4j.auth.basic('neo4j', 'KG****'));
console.log("🚀 ~ file: AuthorArticleSearch.vue ~ line 46 ~ mounted ~ this.drive", this.driver)

let me = this;
me.records = [];
this.clearAll = true;
let session = this.driver.session();
if (query == "") return;
session.run(query, {}).then((result) => {
me.clearAll = false;
me.records = result.records;
console.log("neo4j 查询结果", result.records);

session.close();
me.closeLoading(false);
}).catch(function (error) {
console.log("Cypher 执行失败！", error);
me.driver.close();
});
},
closeLoading(status) {
console.log('closeLoading', status);
},

echarts绘图：

/**
* 直接执行Cypher
*/
executeCypher(query) {
this.echartsNode = [] //节点数组
this.nodesRelation = [] //关系线数组
this.category = [] //echarts图例数据数
// 创建实例
this.driver = neo4j.driver('bolt://localhost:7687', neo4j.auth.basic('neo4j', '******'));
console.log("🚀 ~ file: AuthorArticleSearch.vue ~ line 46 ~ mounted ~ this.drive", this.driver)

let me = this;
me.records = [];
this.clearAll = true;
let session = this.driver.session();
if (query == "") return;
session.run(query, {}).then((result) => {
me.clearAll = false;
me.records = result.records;
console.log("neo4j 查询结果", result.records);
// 开始处理数据
for (let i = 0; i < me.records.length; i++) {
this.echartsData.push({
name: me.records[i]._fields[0].segments[0].start.properties.name,
category: me.records[i]._fields[0].segments[0].start.labels[0]
});
this.echartsData.push({
name: me.records[i]._fields[0].segments[0].end.properties.name,
category: me.records[i]._fields[0].segments[0].end.labels[0]
});
this.nodesRelation.push({
source: me.records[i]._fields[0].segments[0].start.properties.name,
target: me.records[i]._fields[0].segments[0].end.properties.name,
name: me.records[i]._fields[0].segments[0].relationship.type,
});
}

//删除arr中的重复对象
var arrId = [];
var legend = [];
for (var item of this.echartsData) {
legend.push({ name: item.category })
if (arrId.indexOf(item.name) == -1) {
arrId.push(item.name)
this.echartsNode.push(item);
}
}
this.category = Array.from(new Set(legend))

session.close();
me.closeLoading(false);
}).catch(function (error) {
console.log("Cypher 执行失败！", error);
me.driver.close();
});

setTimeout(() => {
this.knowlegGraphshow = true
}, 4000);
},
closeLoading(status) {
console.log('closeLoading', status);
},

配置：

this.options = {
tooltip: {//弹窗
show: false,
// enterable: true,//鼠标是否可进入提示框浮层中
// formatter: formatterHover,//修改鼠标悬停显示的内容
},
legend: {
type: 'scroll',
orient: 'vertical',
left: 10,
top: 20,
bottom: 20,
data: this.category
},
series: [
{

categories: this.category,
// categories: [{
// name: "筹资渠道"
// }],
type: "graph",
layout: "force",
zoom: 0.6,
symbolSize: 60,
// 节点是否可以拖动
draggable: true,
roam: true,
hoverAnimation: false,
// labelLayout: {
// hideOverlap: true,
// },
legendHoverLink: false,
nodeScaleRatio: 0.6, //鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
focusNodeAdjacency: false, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
// categories: categories,
itemStyle: {
color: "#67A3FF",
},
edgeSymbol: ["", "arrow"],
// edgeSymbolSize: [80, 10],
edgeLabel: {
normal: {
show: true,
textStyle: {
fontSize: 12,
},
formatter(x) {
return x.data.name;
},
},
},
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
},
color: "#f6f6f6",
textBorderColor: '#67A3FF',
textBorderWidth: '1.3',
// 多字换行
formatter: function (params) {
// console.log(params);
var newParamsName = "";
var paramsNameNumber = params.name.length;
var provideNumber = 7; //一行显示几个字
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";
var start = p * provideNumber;
var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.name.substring(start, paramsNameNumber);
} else {
tempStr = params.name.substring(start, end) + "\n\n";
}
newParamsName += tempStr;
}
} else {
newParamsName = params.name;
}
return newParamsName;
},
},
},
force: {
repulsion: 200, // 节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
gravity: 0.01, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
edgeLength: 400, // 边的两个节点之间的距离，这个距离也会受 repulsion影响。值越大则长度越长
layoutAnimation: true, // 因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画
// 在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
},
data: this.data,
links: this.links,
// categories: this.categories
}

]
}