vis.js力导向图第一弹——基本展示

正经学徒，佛系记录，不搞事情

一、什么是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