正经学徒,佛系记录,不搞事情
一、什么是vis.js
vis.js是一个前端可视化框架,官方文档位置:http://visjs.org/docs/network/
力导向图(Force-Directed Graph),是绘图的一种算法。在二维或三维空间里配置节点,节点之间用线连接,称为连线。各连线的长度几乎相等,且尽可能不相交。节点和连线都被施加了力的作用,力是根据节点和连线的相对位置计算的。根据力的作用,来计算节点和连线的运动轨迹,并不断降低它们的能量,最终达到一种能量很低的安定状态。
哇,这么抽象,就理解成是vis.js中的一种展示效果吧。
二、为什么用vis.js
学习图形数据库时涉及到了前端的展示,neo4j图形数据库官方客户端采用的前端框架是D3,还是因为不喜欢,所以选择vis
三、怎么使用
第一步:引入文件
<script type="text/javascript" src="js/vis.js"></script>
<link href="css/vis-network.min.css" rel="stylesheet" type="text/css"/>
第二步:定义dom
<div id="network_id" class="network"></div><!-- 拓扑图容器-->
第三步:初始化方法
function init(){
// 创建节点对象
nodes = new vis.DataSet([]);
// 创建连线对象
edges = new vis.DataSet([]);
// 创建一个网络拓扑图 不要使用jquery获取元素
var container = document.getElementById('network_id');
var data = {nodes: nodes, edges: edges};
//全局设置,每个节点和关系的属性会覆盖全局设置
var options = {
//设置节点形状
nodes:{
shape: 'image',//采用图片的形式
size: 15,
font:{
face:'Microsoft YaHei'
}
},
// 设置关系连线
edges:{
font:{
face:'Microsoft YaHei'
}
},
//设置节点的相互作用
interaction: {
//鼠标经过改变样式
hover: true
//设置禁止缩放
//zoomView:false
},
//力导向图效果
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);
}
第四步:构建拓补的方法
//扩展节点 param nodes和relation集合
function createNetwork(param) {
//添加节点
for(var i=0;i<param.nodes.length;i++){
var node = param.nodes[i];
//除了固定的参数外,可以自己增加额外的参数
nodes.add({
id: node.id,
label: node.label,
image:node.image
});
}
//添加关系
for(var i=0;i<param.edges.length;i++){
var edge = param.edges[i];
edges.add({
id: edge.id,
arrows:'to',
from: edge.fromNodeId,
to: edge.toNodeId,
label:edge.label,
font:{align:"middle"},
length:150
});
}
}
}
第五步:调用
//拓扑
var network;
// 创建节点对象
var nodes;
// 创建连线对象
var edges;
$(function () {
init();
//修改初始缩放
network.moveTo({scale: 1});
var param = {
nodes:[
{
id: 'node1',
label: '吴先生',
image:'image/man.png'
},{
id: 'node2',
label: '庄女士1',
image:'image/women.png'
},{
id: 'node3',
label: '庄女士2',
image:'image/women.png'
},{
id: 'node4',
label: '庄女士3',
image:'image/women.png'
},{
id: 'node5',
label: '庄女士4',
image:'image/women.png'
}
],
edges:[
{
id: 'edge1',
fromNodeId: 'node1',
toNodeId: 'node2',
label:'卖'
},{
id: 'edge2',
fromNodeId: 'node1',
toNodeId: 'node3',
label:'了'
},{
id: 'edge3',
fromNodeId: 'node1',
toNodeId: 'node4',
label:'否'
},{
id: 'edge4',
fromNodeId: 'node1',
toNodeId: 'node5',
label:'冷'
}
]
}
createNetwork(param);
});
第六步:最终效果
项目地址:
https://pan.baidu.com/s/1d1ehCP_IOUaJ5YjMJ07Eow 提取码:3drq