在JSP页面如何利用vis.js画出neo4j中的关系图

最新推荐文章于 2024-02-29 15:37:53 发布

yy_23456789

最新推荐文章于 2024-02-29 15:37:53 发布

阅读量1k

点赞数

文章标签： java

本文链接：https://blog.csdn.net/yy_23456789/article/details/123780179

版权

一、下载文件（js）

<script type="text/javascript" src="../vis.js"></script>
<script type="text/javascript" src="s../jquery.min.js"></script>

二、从数据库中获取查询结果（Servlet）

...
String cql1="MATCH p=(n:`知识点"+cid+"`)-[r:`先序知识"+cid+"`]->(m:`知识点"+cid+"`)                 return {start:id(n),end:id(m),id:id(r),type:type(r)} as p limit 20";

String cql2="MATCH (n:`知识点"+cid+"`) RETURN distinct {id:id(n),name:n.name} as p limit                 20";

分别从cql1和cql2中获取节点和节点之间的关系，在赋值给变量kg1、kg2

三、在前端页面利用js绘出所需图形（JSP）

<body>
....
<div style=" width:100%; height:600px;border: 1px solid lightgray;" id="network_id" class="network"></div><!-- 拓扑图容器-->

.....

<script type="text/javascript" src="../vis.js"></script>
 <script type="text/javascript" src="s../jquery.min.js"></script>
<script>
    
    var network;
    // 创建节点对象
    var nodes;
    var edges;
    var para1=${kg1};
    var para2=${kg2};
    $(function () {
        init();
        //修改初始缩放
        network.moveTo({scale: 1});
        var parama1=para1;
        var param2=para2;
        //createNetwork(p2);
        createNetwork(parama1,param2);
    });
    function init(){
        // 创建节点对象
        nodes = new vis.DataSet([]);
        // 创建连线对象
        edges = new vis.DataSet([]);
        // 创建一个网络拓扑图 
        var container = document.getElementById('network_id');
        var data = {nodes: nodes, edges: edges};
        //全局设置，每个节点和关系的属性会覆盖全局设置
        var options = {
            //节点形状
            nodes:{
                size: 15,
                font:{
                    face:'Microsoft YaHei'
                }
            },
            // 设置关系连线
            edges:{
                font:{
                    face:'Microsoft YaHei'
                }
            },
            //设置节点的相互作用
            interaction: {
                hover: true
            },
            physics: {
                enabled: true,
                barnesHut: {
                    gravitationalConstant: -4000,
                    centralGravity: 0.3,
                    springLength: 120,
                    springConstant: 0.04,
                    damping: 0.09,
                    avoidOverlap: 0
                }
            }
        };
        network = new vis.Network(container, data, options);
        //点击节点触发事件
        network.on("click", function (params) {
            document.getElementById("eventSpanContent").innerText = JSON.stringify(
                params.nodes,
            );

        });
    }
    //扩展
    function createNetwork(param1,param2) {
        //添加节点
        for(var i=0;i<param2.length;i++){
            var node = param2[i];
            nodes.add({
                id: node.id,
                label: node.name,
            });
        }
        //添加关系
        for(var i=0;i<param1.length;i++){
            var edge = param1[i];
            edges.add({
                id: edge.id,
                arrows:'to',
                from: edge.start,
                to: edge.end,
                label:edge.type,
                font:{align:"middle"},
                length:150
            });
        }
    }
</script>

yy_23456789

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在JSP页面如何利用vis.js画出neo4j中的关系图

一、下载文件（js）<script type="text/javascript" src="../vis.js"></script><script type="text/javascript" src="s../jquery.min.js"></script>二、从数据库中获取查询结果（Servlet）...String cql1="MATCH p=(n:`知识点"+cid+"`)-[r:`先序知识"+cid+"`]->(m:`知识点
复制链接

扫一扫