neo4j可视化展示
查询前端输入的节点，并显示该节点及其下一级节点以及他们之前的关系
后端
import json
from py2neo import *
from django.shortcuts import render
# 连接数据库
graph = Graph('http://localhost:7474/', auth=('neo4j', 'root'))
def search_one(value):
# 定义data数组存储节点信息
data = []
# 定义links数组存储关系信息
links = []
# 查询节点是否存在
node = graph.run('MATCH(n:person{name:"' + value + '"}) return n').data()
# 如果节点存在len(node)的值为1不存在的话len(node)的值为0
if len(node):
# 如果该节点存在将该节点存入data数组中
# 构造字典存放节点信息
dict = {
'name': value,
'symbolSize': 50,
'category': '对象'
}
data.append(dict)
# 查询与该节点有关的节点，无向，步长为1，并返回这些节点
nodes = graph.run('MATCH(n:person{name:"' + value + '"})<-->(m:person) return m').data()
# 查询该节点所涉及的所有relationship，无向，步长为1，并返回这些relationship
reps = graph.run('MATCH(n:person{name:"' + value + '"})<-[rel]->(m:person) return rel').data()
# 处理节点信息
for n in nodes:
# 将节点信息的格式转化为json
node = json.dumps(n, ensure_ascii=False)
node = json.loads(node)
# 取出节点信息中person的name
name = str(node['m']['name'])
# 构造字典存放单个节点信息
dict = {
'name': name,
'symbolSize': 50,
'category': '对象'
}
# 将单个节点信息存储进data数组中
data.append(dict)
# 处理relationship
for r in reps:
source = str(r['rel'].start_node['name'])
target = str(r['rel'].end_node['name'])
name = str(type(r['rel']).__name__)
dict = {
'source': source,
'target': target,
'name': name
}
links.append(dict)
# 构造字典存储data和links
search_neo4j_data = {
'data': data,
'links': links
}
# 将dict转化为json格式
search_neo4j_data = json.dumps(search_neo4j_data)
return search_neo4j_data
else:
print("查无此人")
return 0
def index(request):
ctx = {}
if request.method == 'POST':
# 接收前端传过来的查询值
node_name = request.POST.get('node')
# 查询结果
search_neo4j_data = search_one(node_name)
# 未查询到该节点
if search_neo4j_data == 0:
ctx = {'title': '数据库中暂未添加该实体'}
# 查询到了该节点
else:
return render(request, 'index.html',{'search_neo4j_data': search_neo4j_data, 'ctx': ctx})
return render(request, 'index.html', {'ctx': ctx})
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="{% static 'echarts.min.js' %}"></script>
</head>
<body>
<div style="width: 800px;height: 750px;float: right;margin-right: 10px;">
<div style="width: 800px;height: 50px;border-top: 2px solid black;border-left: 2px solid black;border-right: 2px solid black">
<form action="/" method="post">
<input type="text" name="node" style="width: 250px;height: 20px; margin-top: 10px;margin-left: 20px;">
<input type="submit" value="查询">
</form>
</div>
{% if ctx %}
<div style="width: 800px;height: 700px;border: 2px solid black;text-align: center;line-height: 704px;">
<h1>该数据库中未添加该实体</h1>
</div>
{% endif %}
{% if search_neo4j_data %}
<div id="container_search" style="width: 800px;height: 700px;border: 2px solid black"></div>
{% endif %}
</div>
<script type="text/javascript">
{#查询单个#}
var search_neo4j_data=[{{ search_neo4j_data|safe }}]
var data2=search_neo4j_data[0]['data']
var links2=search_neo4j_data[0]['links']
console.log(data2)
console.log(links2)
var myChart2 = echarts.init(document.getElementById('container_search'));
var categories2 = [{name: "对象"}, {name: "属性"}, {name: "实例"}];
option2 = {
// 图的标题
title: {
text: '查询人物关系图谱'
},
// 提示框的配置
tooltip: {
formatter: function (x) {
return x.data.des;
}
},
// 工具箱
toolbox: {
// 显示工具箱
show: true,
feature: {
mark: {
show: true
},
// 还原
restore: {
show: true
},
// 保存为图片
saveAsImage: {
show: true
}
}
},
legend: [{
// selectedMode: 'single',
data: categories2.map(function (a) {
return a.name;
})
}],
series: [{
type: 'graph', // 类型:关系图
layout: 'force', //图的布局，类型为力导图
symbolSize: 40, // 调整节点的大小
roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [2, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
force: {
repulsion: 2500,
edgeLength: [10, 50]
},
draggable: true,
lineStyle: {
normal: {
width: 2,
color: '#4b565b',
}
},
edgeLabel: {
normal: {
show: true,
formatter: function (x) {
return x.data.name;
}
}
},
label: {
normal: {
show: true,
textStyle: {}
}
},
// 数据
data: data2,
links: links2,
categories: categories2,
}]
};
myChart2.setOption(option2);
</script>
</body>
</html>
