正經學徒，佛系記錄，不搞事情

一、什麼是vis.js

力導向圖（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