在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:`知识点"+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>
类似资料：