• neo4j可视化展示3


    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
        }
        neo4j_data = json.dumps(neo4j_data)
        return neo4j_data
    
    
    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': '数据库中暂未添加该实体'}
                neo4j_data = search_all()
                return render(request, 'index.html', {'neo4j_data': neo4j_data, 'ctx': ctx})
            # 查询到了该节点
            else:
                neo4j_data = search_all()
                return render(request, 'index.html',
                              {'neo4j_data': neo4j_data, 'search_neo4j_data': search_neo4j_data, 'ctx': ctx})
    
        neo4j_data = search_all()
        return render(request, 'index.html', {'neo4j_data': neo4j_data, '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 id="container" style=" 800px;height: 700px;border: 2px solid black;float: left;margin-top: 50px;"></div>
    <div style=" 800px;height: 750px;float: right;margin-right: 10px;">
        <div style=" 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=" 250px;height: 20px; margin-top: 10px;margin-left: 20px;">
                <input type="submit" value="查询">
            </form>
        </div>
        {% if ctx %}
            <div style=" 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=" 800px;height: 700px;border: 2px solid black"></div>
        {% endif %}
    </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: {
                         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);
    
        {#查询单个#}
        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: {
                         2,
                        color: '#4b565b',
                    }
                },
                edgeLabel: {
                    normal: {
                        show: true,
                        formatter: function (x) {
                            return x.data.name;
                        }
                    }
                },
                label: {
                    normal: {
                        show: true,
                        textStyle: {}
                    }
                },
    
                // 数据
                data: data2,
                links: links1,
                categories: categories2,
            }]
        };
        myChart2.setOption(option2);
    
    </script>
    </body>
    </html>
    

      

     
  • 相关阅读:
    浏览器—CORS 通信的学习总结
    前端算法
    移动端适配时对meta name="viewport" content="width=device-width,initial-scale=1.0"的理解
    react和vue的区别
    对xss攻击和csrf攻击的理解
    前端如何解决跨域
    你没那么重要
    五福
    天道
    决策
  • 原文地址:https://www.cnblogs.com/huaobin/p/16343313.html
Copyright © 2020-2023  润新知