neo4j可视化展示

{% 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 id="container" style="width: 800px;height: 700px;border: 2px solid black;float: left;margin-top: 50px;"></div>
<script type="text/javascript">
    {#查询所有#}
    var neo4j_data = [{{ neo4j_data|safe }}]
    var data1 = neo4j_data[0]['data']
    var links1 = neo4j_data[0]['links']
    console.log(data1)
    console.log(links1)
    var myChart1 = echarts.init(document.getElementById('container'));
    var categories1 = [{name: "对象"}, {name: "属性"}, {name: "实例"}];
    option1 = {
        // 图的标题
        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: categories1.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: data1,
            links: links1,
            categories: categories1,
        }]
    };
    myChart1.setOption(option1);
</script>
</body>
</html>

  

https://blog.csdn.net/weixin_44747173/article/details/124835406?spm=1001.2101.3001.6650.16&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-16-124835406-blog-124194577.pc_relevant_antiscanv4&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-16-124835406-blog-124194577.pc_relevant_antiscanv4&utm_relevant_index=20

利用Echarts将后端获取的neo4j中的图谱数据显示在前端界面
文章包括四部分内容:
①利用python创建图数据库
②查询neo4j中所有的节点和关系并显示在前端
③查询前端输入的节点,并显示该节点及其下一级节点以及他们之前的关系
④将查询所有和查询单个合并

一、利用python创建图数据库
1、启动neo4j
在cmd中输入neo4j.bat console
2、安装py2neo
在pycharm的命令窗口输入pip install py2neo
3、创建数据

import py2neo

# 连接数据库
graph = py2neo.Graph('http://localhost:7474', auth=('neo4j', 'root'))

def creat():
    # 创建节点
    lb = py2neo.Node('person', name='刘备')
    gy = py2neo.Node('person', name='关羽')
    zgl = py2neo.Node('person', name='诸葛亮')
    cc = py2neo.Node('person', name='曹操')
    xhd = py2neo.Node('person', name='夏侯惇')
    sq = py2neo.Node('person', name='孙权')
    sc = py2neo.Node('person', name='孙策')
    zy = py2neo.Node('person', name='周瑜')
    graph.create(lb)
    graph.create(gy)
    graph.create(zgl)
    graph.create(cc)
    graph.create(xhd)
    graph.create(sq)
    graph.create(sc)
    graph.create(zy)
    r1 = py2neo.Relationship(lb, '兄弟', gy)
    r2 = py2neo.Relationship(lb, '属下', zgl)
    r3 = py2neo.Relationship(lb, '大舅哥+敌对', sc)
    r4 = py2neo.Relationship(lb, '二舅哥+敌对', sq)
    r5 = py2neo.Relationship(lb, '敌对', cc)
    r6 = py2neo.Relationship(cc, '属下', xhd)
    r7 = py2neo.Relationship(sq, '兄弟', sc)
    r8 = py2neo.Relationship(sq, '属下', zy)
    graph.create(r1)
    graph.create(r2)
    graph.create(r3)
    graph.create(r4)
    graph.create(r5)
    graph.create(r6)
    graph.create(r7)
    graph.create(r8)
 if __name__ == '__main__':
    creat()

  
二、查询所有节点和关系并显示在前端
1、引入echarts
echarts的引入并不复杂,详情见此处
2、查询所有节点和关系
后端

import json
from py2neo import *
from django.shortcuts import render

# 连接数据库
graph = Graph('http://localhost:7474/', auth=('neo4j', 'root'))


def search_all():
    # 定义data数组,存放节点信息
    data = []
    # 定义关系数组,存放节点间的关系
    links = []
    # 查询所有节点,并将节点信息取出存放在data数组中
    for n in graph.nodes:
        # 将节点信息转化为json格式,否则中文会不显示
        nodesStr = json.dumps(graph.nodes[n], ensure_ascii=False)
        # 取出节点的name
        node_name = json.loads(nodesStr)['name']
        # 构造字典,存储单个节点信息
        dict = {
            'name': node_name,
            'symbolSize': 50,
            'category': '对象'
        }
        # 将单个节点信息存放在data数组中
        data.append(dict)
    # 查询所有关系,并将所有的关系信息存放在links数组中
    rps = graph.relationships
    for r in rps:
        # 取出开始节点的name
        source = str(rps[r].start_node['name'])
        # 取出结束节点的name
        target = str(rps[r].end_node['name'])
        # 取出开始节点的结束节点之间的关系
        name = str(type(rps[r]).__name__)
        # 构造字典存储单个关系信息
        dict = {
            'source': source,
            'target': target,
            'name': name
        }
        # 将单个关系信息存放进links数组中
        links.append(dict)
    # 输出所有节点信息
    for item in data:
        print(item)
    # 输出所有关系信息
    for item in links:
        print(item)
    # 将所有的节点信息和关系信息存放在一个字典中
    neo4j_data = {
        'data': data,
        'links': links
    }
    #将字典转化json格式
    neo4j_data = json.dumps(neo4j_data)
    return neo4j_data

def index(request):
    neo4j_data = search_all()
    return render(request, 'index.html', {'neo4j_data': neo4j_data})
`

  

 

posted @ 2022-06-07 08:00  青竹之下  阅读(1415)  评论(0编辑  收藏  举报