参考文章：vue+neo4j +纯前端（neovis.js / neo4j-driver） 实现 知识图谱的集成 大干货--踩坑无数！！！将经验分享给有需要的小伙伴_neovis.js vue-CSDN博客
1、安装环境
npm install -save neovis.js
npm install neo4j-driver
npm install vis --save
2、入口函数中引用
import vis from "vis";
Vue.prototype.$vis = vis;
1、局部引入neo4j工具 import neo4j from "neo4j-driver"
2、处理数据的函数（根据自己返回的数据结构进行处理，没什么参考价值）
//实参是你的neo4j里调用的放法
let query=“MATCH (n) RETURN n LIMIT 25”
dealData(query) {
this.echartsNode = [] //节点数组
this.nodesRelation = [] //关系线数组
this.category = [] //echarts图例数据数
let newNodes = []
// 创建实例
//1、获取到你数据库里的数据
this.driver = neo4j.driver('bolt://localhost:8081', neo4j.auth.basic('neo4j', '你的密码'));
// this.driver = neo4j.driver('bolt://localhost:7687', neo4j.auth.basic('neo4j', '123456'));
console.log("this.drive", this.driver)
let that = this;
that .records = [];
this.clearAll = true;
let session = this.driver.session();
if (query == "") return;
session.run(query, {}).then((result) => {
console.log("result", result);
that .clearAll = false;
that .records = result.records;
console.log("neo4j 查询结果", result.records);
// 准备label的字典
let idList = []
let newData = []
// 开始处理数据
// 拿到要展示的label字典，我是根据这个写死的
for (let i = 0; i < that .records.length; i++) {
idList.push(that .records[i]._fields[1][0].type)
let index1 = newData.findIndex(item => {
return item.label === that .records[i]._fields[2].labels[0]
})
if (index1 === -1) {
newData.push({
label: that .records[i]._fields[2].labels[0],
value: that .records[i]._fields[2].properties
})
}
// 拼接边数据和节点数据（边数据可以没有id可以重复，节点数据需要id不可以重复）
let index = newNodes.findIndex(item => {
return item.id === that .records[i]._fields[2].identity.low
})
if (index === -1) {
// 节点数据
newNodes.push({
id: that .records[i]._fields[2].identity.low,
label: that .records[i]._fields[2].properties[that .dealLabels(that .records[i]._fields[2].labels[0])],
properties: that .records[i]._fields[2].properties })
}
// 边数据
this.nodesRelation.push({
from: that .records[i]._fields[1][0].start.low,
to: that .records[i]._fields[1][0].end.low,
label: that .records[i]._fields[1][0].type,
// id: that .records[i]._fields[1][0].identity.low,
properties: that .records[i]._fields[1][0].properties
});
}
console.log("labelList", newData, idList);
console.log("value", this.nodesRelation, newNodes);
this.nodesArray = newNodes //节点数组
this.edgesArray = this.nodesRelation //关系线数组
this.$nextTick(() => {
this.visDraw()
})
session.close();
that .closeLoading(false);
}).catch(function (error) {
console.log("Cypher 执行失败！", error);
that .driver.close();
session.close();
});
},
图表渲染
visDraw() {
let container = this.$refs.network_id;
let data = { nodes: this.nodesArray, edges: this.edgesArray }
console.log("data", data)
let options = {
autoResize: true,
// / 设置节点样式
nodes: {
shape: "dot",
size: 20,
font: {
//字体配置
size: 20
},
color: {
// border: "#2B7CE9", //节点边框颜色
background: "#97C2FC", //节点背景颜色
highlight: {
//节点选中时状态颜色
border: "#2B7CE9",
background: "#D2E5FF"
},
hover: {
//节点鼠标滑过时状态颜色
border: "#2B7CE9",
background: "#D2E5FF"
}
},
borderWidth: 0, //节点边框宽度，单位为px
borderWidthSelected: 2 //节点被选中时边框的宽度，单位为px
},
// 边线配置
edges: {
width: 1,
length: 260,
color: {
color: "#848484",
highlight: "#848484",
hover: "#848484",
inherit: "from",
opacity: 1.0
},
shadow: false,
smooth: {
//设置两个节点之前的连线的状态
enabled: false //默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
},
arrows: { to: true } //箭头指向to
},
//计算节点之前斥力，进行自动排列的属性
physics: {
// enabled: true, //默认是true，设置为false后，节点将不会自动改变，拖动谁谁动。不影响其他的节点
// barnesHut: {
// gravitationalConstant: -4000,
// centralGravity: 0.3,
// springLength: 120,
// springConstant: 0.04,
// damping: 0.09,
// avoidOverlap: 0
// },
},
// physics: false,
//用于所有用户与网络的交互。处理鼠标和触摸事件以及导航按钮和弹出窗口
interaction: {
hover: true,
dragNodes: true, //是否能拖动节点
dragView: true, //是否能拖动画布
// hover: true, //鼠标移过后加粗该节点和连接线
// multiselect: true, //按 ctrl 多选
// selectable: true, //是否可以点击选择
// selectConnectedEdges: true, //选择节点后是否显示连接线
// hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
zoomView: true //是否能缩放画布
},
};
this.network = new this.$vis.Network(container, data, options);
},
vis.js 是一个用于创建动态、交互式网络图表的 JavaScript 库。在使用 vis.js 创建图表时，你需要提供 nodes 和 edges 数据来定义图表的结构。
Nodes（节点）
nodes 是一个数组，其中包含图表中所有节点的信息。每个节点对象通常包含以下属性：
id (必需): 节点的唯一标识符，通常是字符串或数字。label (可选): 节点的标签，显示在图表中的节点旁边。其他自定义属性 (可选): 你可以根据需要添加任何自定义属性到节点对象中，这些属性可以在后续的操作中用于渲染、交互等。例：{ id: 1, label: 'Node 1', // 其他自定义属性... } Edges（边） edges 也是一个数组，其中包含图表中所有边的信息。每个边对象通常包含以下属性： from (必需): 边的起始节点的 id。to (必需): 边的目标节点的 id。label (可选): 边的标签，显示在图表中的边上。arrows (可选): 一个对象，用于定义边的箭头样式。dashes (可选): 一个布尔值或对象，用于定义边的虚线样式。其他自定义属性 (可选): 和节点一样，你也可以添加任何自定义属性到边对象中。例：{ from: 1, to: 2, label: 'Edge 1-2', // 其他自定义属性... }
个人的数据举例：带有start和end的是边数据，边数据是可以重复的且id不为必须，根据边数据将节点数据进行连接
参考阅读
您阅读本篇文章共花了：
发表评论