碼上歡樂
相關內容    簡體    繁體

Vis.js – 基於瀏覽器的動態 JavaScript 可視化庫

本文轉載自   查看原文   2018-10-29 11:57   3204    js插件/ 1_js小功能（插件）

Vis.js – 基於瀏覽器的動態 JavaScript 可視化庫

一、總結

一句話總結：Vis.js 是一個動態的，基於瀏覽器的可視化庫。該庫被設計為易於使用，能處理大量的動態數據。該庫由以下幾部分組成：一是數據集和數據視圖，基於靈活的鍵/值數據集，可以添加，更新和刪除項目，訂閱數據集變化；二是時間軸，用於顯示不同類型的時間軸數據，在時間軸上項目可以交互移動，縮放和操縱；三是圖形，使用節點和邊顯示一個交互式圖形或網絡。

 

1、vis庫由哪些部分組成？

數據視圖
時間軸
圖形

一是數據集和數據視圖，基於靈活的鍵/值數據集，可以添加，更新和刪除項目，訂閱數據集變化；

二是時間軸，用於顯示不同類型的時間軸數據，在時間軸上項目可以交互移動，縮放和操縱；

三是圖形，使用節點和邊顯示一個交互式圖形或網絡。

 

 

 

 

二、Vis.js – 基於瀏覽器的動態 JavaScript 可視化庫

Vis.js 是一個動態的，基於瀏覽器的可視化庫。該庫被設計為易於使用，能處理大量的動態數據。該庫由以下幾部分組成：一是數據集和數據視圖，基於靈活的鍵/值數據集，可以添加，更新和刪除項目，訂閱數據集變化；二是時間軸，用於顯示不同類型的時間軸數據，在時間軸上項目可以交互移動，縮放和操縱；三是圖形，使用節點和邊顯示一個交互式圖形或網絡。

 

 

　　時間軸效果可以看這里的 Demo，示例代碼如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype html>
<html>
<head>
<title>Timeline | Basic demo</title>
<script src= "http://visjs.org/dist/vis.js" ></script>
<link href= "http://visjs.org/dist/vis.css" rel= "stylesheet" type= "text/css" />
 
<style type= "text/css" >
body, html {
font-family: sans-serif;
}
</style>
</head>
<body>
<div id= "mytimeline" ></div>
 
<script type= "text/javascript" >
var container = document.getElementById( 'mytimeline' );
var data = [
{id: 1, content: 'item 1' , start: '2013-04-20' },
{id: 2, content: 'item 2' , start: '2013-04-14' },
{id: 3, content: 'item 3' , start: '2013-04-18' },
{id: 4, content: 'item 4' , start: '2013-04-16' , end: '2013-04-19' },
{id: 5, content: 'item 5' , start: '2013-04-25' },
{id: 6, content: 'item 6' , start: '2013-04-27' }
];
var options = {};
var timeline = new vis.Timeline(container, data, options);
</script>
</body>
</html>

　　

立即下載 插件主頁

 
參考： Vis.js – 基於瀏覽器的動態 JavaScript 可視化庫 - 夢想步行者 - CSDN博客
https://blog.csdn.net/baby_fmm/article/details/25773581
 
 
 

三、vis.js 小記

 
簡述

vis.js 基於瀏覽器的動態可視化庫。該庫被設計為易於使用，處理大量的動態數據，並支持對數據的操作和交互。該庫由組件DataSet，Timeline，Network，Graph2d和Graph3d組成

文檔地址：http://visjs.org/

小demo（雙擊折疊展開/隱藏子節點以及位置自定義）

這里寫圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>visjs關系圖-雙擊折疊展開子節點（隱藏顯示子節點）</title>
</head>

<body>
<div id="mynetwork" style="width: 100%;height: 100%;border: 1px solid lightgray;margin:0 auto;" >0</div>
</body>

<script type="text/javascript" src="http://visjs.org/dist/vis.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<link href="http://visjs.org/dist/vis.min.css" rel="stylesheet" type="text/css"/>
<script> var container = document.getElementById('mynetwork'); var network = null; var newNodeArr = []; var options; var nodesArr = []; var edgesArr = []; var nodes_data; var edges_data; var connectedNum = '子節點數:'; $(function (){ // $('#mynetwork').bind("contextmenu", function(e){ return false; }); // 右鍵 // 高度響應式 clientHeight = document.documentElement.clientHeight; clientWidth = document.documentElement.clientWidth; $('#mynetwork').css('height',clientHeight-70); $('#mynetwork').css('width',clientWidth-180); var _mydata = { "nodes":[ {"id":0,"assistId":0,"label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","pid":0,"hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-674","y":"-716","hidden":false}, {"id":1,"assistId":1,"name":"網路","label":"網路","image":"http://visjs.org/examples/network/img/refresh-cl/System-Firewall-2-icon.png","shape":"image","pid":1,"hostType":"2","size":22,"isOurDraw":"false","x":"-86","y":"-287","hidden":false}, {"id":"1_0","assistId":"1_0","name":"網路","label":"網路","image":"http://visjs.org/examples/network/img/refresh-cl/System-Firewall-2-icon.png","shape":"image","pid":null,"hostType":"2","hostStatus":"1","size":22,"isOurDraw":"false","x":"-75","y":"51","hidden":false}, {"id":"1_0_0","assistId":"1_0_0","name":"網路","label":"網路","image":"http://visjs.org/examples/network/img/refresh-cl/System-Firewall-2-icon.png","shape":"image","pid":"1_0","hostType":"2","hostStatus":"1","size":22,"isOurDraw":"false","x":"-54","y":"455","hidden":false}, {"id":"1_0_0_0","assistId":"1_0_0_0","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","pid":"1_0_0","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"94","y":"340","hidden":false}, {"id":"1_0_0_1","assistId":"1_0_0_1","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-133","y":"641","hidden":false}, {"id":"1_0_0_2","assistId":"1_0_0_2","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-167","y":"439","hidden":false}, {"id":"1_0_0_3","assistId":"1_0_0_3","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"170","y":"447","hidden":false}, {"id":"1_0_0_4","assistId":"1_0_0_4","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"66","y":"435","hidden":false}, {"id":"1_0_0_5","assistId":"1_0_0_5","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-224","y":"576","hidden":false}, {"id":"1_0_0_6","assistId":"1_0_0_6","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-143","y":"540","hidden":false}, {"id":"1_0_0_7","assistId":"1_0_0_7","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-233","y":"374","hidden":false}, {"id":"1_0_0_8","assistId":"1_0_0_8","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-120","y":"348","hidden":false}, {"id":"1_0_0_9","assistId":"1_0_0_9","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-249","y":"476","hidden":false}, {"id":"1_0_0_10","assistId":"1_0_0_10","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"43","y":"532","hidden":false}, {"id":"1_0_0_11","assistId":"1_0_0_11","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-30","y":"662","hidden":false}, {"id":"1_0_0_12","assistId":"1_0_0_12","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"134","y":"533","hidden":false}, {"id":"1_0_0_13","assistId":"1_0_0_13","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-49","y":"576","hidden":false}, {"id":"1_0_0_14","assistId":"1_0_0_14","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-6","y":"333","hidden":false}, {"id":"1_0_0_15","assistId":"1_0_0_15","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"67","y":"622","hidden":false}, {"id":"1_0_1","assistId":"1_0_1","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","pid":"1_0","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-24","y":"-123","hidden":false}, {"id":"1_0_2","assistId":"1_0_2","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","pid":"1_0","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-191","y":"92","hidden":false}, {"id":"1_0_3","assistId":"1_0_3","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","pid":"1_0","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-227","y":"156","hidden":false}, {"id":"1_0_4","assistId":"1_0_4","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","pid":"1_0","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-280","y":"75","hidden":false}, {"id":"1_0_5","assistId":"1_0_5","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","pid":"1_0","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"129","y":"64","hidden":false}, {"id":"1_0_6","assistId":"1_0_6","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","pid":"1_0","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-169","y":"-25","hidden":false}, {"id":"1_0_7","assistId":"1_0_7","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","pid":"1_0","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-133","y":"160","hidden":false}, {"id":"1_0_8","assistId":"1_0_8","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","pid":"1_0","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-183","y":"-108","hidden":false}, {"id":"1_0_9","assistId":"1_0_9","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","pid":"1_0","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"66","y":"137","hidden":false}, {"id":"1_0_10","assistId":"1_0_10","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","pid":"1_0","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"101","y":"-35","hidden":false}, {"id":"1_0_11","assistId":"1_0_11","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","pid":"1_0","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"4","y":"-33","hidden":false}, {"id":"1_0_12","assistId":"1_0_12","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","pid":"1_0","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-33","y":"154","hidden":false}, {"id":"1_0_13","assistId":"1_0_13","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","pid":"1_0","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"39","y":"47","hidden":false}, {"id":"1_0_14","assistId":"1_0_14","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","pid":"1_0","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-126","y":"-127","hidden":false}, {"id":"1_0_15","assistId":"1_0_15","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","pid":"1_0","hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-256","y":"-30","hidden":false}, {"id":"1_1","assistId":"1_1","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","pid":null,"hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"93","y":"-399","hidden":false}, {"id":"1_2","assistId":"1_2","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","pid":null,"hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-267","y":"-365","hidden":false}, {"id":"1_3","assistId":"1_3","label":"設備","image":"http://visjs.org/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png","shape":"image","pid":null,"hostType":"1","hostStatus":"1","size":15,"isOurDraw":"false","x":"-99","y":"-483","hidden":false} ], "edges":[ {"id":"1_0","from":1,"to":"1_0","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_0","from":"1_0","to":"1_0_0","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_0_0","from":"1_0_0","to":"1_0_0_0","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_0_1","from":"1_0_0","to":"1_0_0_1","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_0_2","from":"1_0_0","to":"1_0_0_2","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_0_3","from":"1_0_0","to":"1_0_0_3","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_0_4","from":"1_0_0","to":"1_0_0_4","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_0_5","from":"1_0_0","to":"1_0_0_5","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_0_6","from":"1_0_0","to":"1_0_0_6","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_0_7","from":"1_0_0","to":"1_0_0_7","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_0_8","from":"1_0_0","to":"1_0_0_8","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_0_9","from":"1_0_0","to":"1_0_0_9","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_0_10","from":"1_0_0","to":"1_0_0_10","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_0_11","from":"1_0_0","to":"1_0_0_11","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_0_12","from":"1_0_0","to":"1_0_0_12","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_0_13","from":"1_0_0","to":"1_0_0_13","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_0_14","from":"1_0_0","to":"1_0_0_14","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_0_15","from":"1_0_0","to":"1_0_0_15","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_1","from":"1_0","to":"1_0_1","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_2","from":"1_0","to":"1_0_2","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_3","from":"1_0","to":"1_0_3","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_4","from":"1_0","to":"1_0_4","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_5","from":"1_0","to":"1_0_5","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_6","from":"1_0","to":"1_0_6","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_7","from":"1_0","to":"1_0_7","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_8","from":"1_0","to":"1_0_8","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_9","from":"1_0","to":"1_0_9","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_10","from":"1_0","to":"1_0_10","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_11","from":"1_0","to":"1_0_11","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_12","from":"1_0","to":"1_0_12","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_13","from":"1_0","to":"1_0_13","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_14","from":"1_0","to":"1_0_14","color":{"color":"#ccc"},"hidden":false}, {"id":"1_0_15","from":"1_0","to":"1_0_15","color":{"color":"#ccc"},"hidden":false}, {"id":"1_1","from":1,"to":"1_1","color":{"color":"#ccc"},"hidden":false}, {"id":"1_2","from":1,"to":"1_2","color":{"color":"#ccc"},"hidden":false}, {"id":"1_3","from":1,"to":"1_3","color":{"color":"#ccc"},"hidden":false} ] }; draw(_mydata); }); function draw(data){ var options = { nodes : { font:{ color: "#888", size: 10 } }, edges: { smooth: false, //是否顯示方向箭頭 color: "#333" // 線條顏色 }, layout: { improvedLayout:false }, interaction: { navigationButtons: true, // 如果為真，則在網絡畫布上繪制導航按鈕。這些是HTML按鈕，可以使用CSS完全自定義。 keyboard: { enabled: true, speed: { x: -1, y: -1, zoom: 0.02 }, bindToWindow: true } // 啟用鍵盤快捷鍵 }, physics: { stabilization: false, barnesHut: { centralGravity: 8, // 中心重力吸引器將整個網絡拉回中心 springLength: 80, // 邊緣被建模為彈簧。這個彈簧長度是彈簧的剩余長度 gravitationalConstant: -80000, // 重力吸引。我們喜歡排斥 所以價值是負數。如果你想要排斥力更強，減小值（所以-10000，-50000）。 avoidOverlap: 0.2, // 接受范圍：[0 .. 1]。當大於0時，會考慮節點的大小。該距離將由重力模型的節點的包圍圓的半徑計算。值1是最大重疊避免。 damping: 0.3, springConstant: 0.5 }, minVelocity: 16 // 一旦達到所有節點的最小速度，我們假設網絡已經穩定，仿真停止。 } }; network = new vis.Network(container, data, options); nodes_data = network.body.data.nodes; edges_data = network.body.data.edges; //動畫穩定后的處理事件 var stabilizedTimer; network.on("stabilized", function (params) { // 會調用兩次？ window.clearTimeout(stabilizedTimer); stabilizedTimer = setTimeout(function(){ exportNetworkPosition(network); options.physics.enabled = false; // 關閉物理系統 network.setOptions(options); },200); }); // 右鍵 network.on("oncontext",function(params){}); //選中節點 network.on("selectNode", function (params) {}); //單擊節點 network.on("click", function (params) {}); //雙擊節點 隱藏或者顯示子節點 network.on("doubleClick", function (params) { if ( params.nodes.length != 0) { // 雙擊的是節點 var _node = params.nodes[0]; var _nodeName = nodes_data._data[_node].name; var _allChild = getAllChilds(network,_node,[]); if(_allChild.length > 0 ){ // 存在子節點 if( nodes_data._data[_allChild[_allChild.length-1]].hidden == false){ nodes_data.update([{id:_node,label:_nodeName + " "+connectedNum+_allChild.length}]); for(var i=0;i<_allChild.length;i++){ nodes_data.update([{id:_allChild[i], hidden:true}]); edges_data.update([{id:_allChild[i], hidden:true}]); } }else{ nodes_data.update([{id:_node, label:_nodeName}]); for(var j=0;j<_allChild.length;j++){ nodes_data.update([{id:_allChild[j], hidden:false}]); edges_data.update([{id:_allChild[j], hidden:false}]); } } } } }); //拖動節點 network.on("dragging", function (params) {//拖動進行中事件 if (params.nodes.length != 0 ) { nodeMoveFun(params); } }); //拖動結束后 network.on("dragEnd", function (params) { if (params.nodes.length != 0 ) { var arr = nodeMoveFun(params); exportNetworkPosition(network,arr); } }); // 縮放 network.on("zoom", function (params) {}); } /* *獲取所有子節點 * network ：圖形對象 * _thisNode ：單擊的節點（父節點） * _Allnodes ：用來裝子節點ID的數組 * */ function getAllChilds(network,_thisNode,_Allnodes){ var _nodes = network.getConnectedNodes(_thisNode,"to"); if(_nodes.length > 0){ for(var i=0;i<_nodes.length;i++){ getAllChilds(network,_nodes[i],_Allnodes); _Allnodes.push(_nodes[i]); } } return _Allnodes }; // 節點移動 function nodeMoveFun(params){ var click_node_id = params.nodes[0]; var allsubidsarr = getAllChilds(network,click_node_id,[]); // 獲取所有的子節點 if(allsubidsarr){ // 如果存在子節點 var positionThis = network.getPositions(click_node_id); var clickNodePosition = positionThis[click_node_id]; // 記錄拖動后，被拖動節點的位置 var position = JSON.parse(localStorage.getItem("position")); var startNodeX,startNodeY; // 記錄被拖動節點的子節點，拖動前的位置 var numNetx,numNety; // 記錄被拖動節點移動的相對距離 var positionObj={}; // 記錄移動的節點位置信息， 用於返回 positionObj[click_node_id] = {x:clickNodePosition.x, y:clickNodePosition.y}; // 記錄被拖動節點位置信息 numNetx = clickNodePosition.x - position[click_node_id].x; // 拖動的距離 numNety = clickNodePosition.y - position[click_node_id].y; for(var j =0;j<allsubidsarr.length;j++){ if(position[allsubidsarr[j]]) { startNodeX = position[allsubidsarr[j]].x; // 子節點開始的位置 startNodeY = position[allsubidsarr[j]].y; network.moveNode(allsubidsarr[j], (startNodeX + numNetx), (startNodeY + numNety)); // 在視圖上移動子節點 positionObj[allsubidsarr[j]] = {x:(startNodeX + numNetx), y:(startNodeY + numNety)}; // 記錄子節點位置信息 } } } return positionObj; }; /* *節點位置設置 * network ：圖形對象 * arr ：本次移動的節點位置信息 * */ function exportNetworkPosition(network,arr){ if(arr){ // 折疊過后 getPositions() 獲取的位置信息里不包含隱藏的節點位置信息，這時候調用上次存儲的全部節點位置，並修改這次移動的節點位置，最后保存 var localtionPosition = JSON.parse(localStorage.getItem("position")); for(let index in arr ){ localtionPosition[index] = { x:arr[index].x, y:arr[index].y } } setLocal(localtionPosition); }else{ var position = network.getPositions(); setLocal(position); } }; //處理本地存儲，這里僅僅只能作為高級瀏覽器使用，ie9以下不能處理 function setLocal(position) { localStorage.removeItem("position"); localStorage.setItem("position",JSON.stringify(position)); } </script>
</html>
添加節點以及添加連線的方法
  1. 簡單的添加兩個節點，以及一條連線（除此之外 nodes 和 edges 還支持 update 和 remove 操作）
network.body.data.nodes.add([{id: "addNode01",label: "add01",level: 5},{id: "addNode02",label: "add02",level: 5}]);
network.body.data.edges.add([{id: "addEdge01",from: "addNode01",to: "addNode02"}]);

這里寫圖片描述
2. 比較復雜的在線編輯，在 option 中啟用 manipulation 配置：addNode、editNode、deleteNode、addEdge、editEdge 和 deleteEdge。

var options = {
            autoResize: true, // Default：true 如果為true，則網絡將自動檢測其容器何時調整大小，並相應地重新繪制自己。如果為false，則可以在使用函數redraw（）和setSize（）調整容器的容器大小后強制重新繪制網絡。
            clickToUse: false, // Default：false 將網絡配置clickToUse為時，只有在激活時才會對鼠標和觸摸事件做出反應。激活時，網絡周圍會顯示藍色陰影邊框。通過點擊該網絡將網絡設置為活動狀態，然后通過點擊網絡外部或按ESC鍵將其更改為非活動狀態。
            width: "100%", // 畫布的寬度。可以百分比或像素
            height: "100%",
            locale: "cn", // 選擇區域設置。默認情況下，該語言是英語。
            locales: locales, // 語言環境 默認情況下 'en'， 'de'， 'es'， 'it'， 'nl' 'pt-br'， 'ru' 的支持。
            configure: {
                enabled: false, // 打開或關閉配置界面。
                filter:  function(option, path){
                    return path.indexOf('physics') !== -1
                }, // 如果布爾值為true，則給出所有選項，false將不顯示任何值。 如果提供了字符串，則允許以下任意組合：節點，邊，布局，交互，操縱，物理，選擇，渲染器。隨意想出一個有趣的分開的字符。最后，當提供一個字符串數組時，任何前面提到的字段都被接​​受。當提供一個函數時，你會收到兩個參數。選項對象中的選項和選項的路徑。如果它返回true，則選項將顯示在配置程序中。
// container: undefined,
                showButton: true // 在配置器底部顯示生成選項按鈕。
            },
            nodes : {
                font:{
                    color: "#eee",
                    size: 10
                }
            },
            edges: {
                smooth: {
                    enabled: true,
                    type: 'cubicBezier', // 'dynamic', 'continuous', 'discrete','diagonalCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW', 'cubicBezier'
                    forceDirection: 'vertical', //'horizontal', 'vertical', 'none' 該選項僅用於cubicBezier曲線。
                    roundness: 0.7 // 0 .. 1.0
                },
                color: "#737373" // 線條顏色
            },
            layout: { // 自動層級布局
                improvedLayout:false,
                hierarchical: {
                    enabled:true, //切換分層布局系統
                    levelSeparation: 260,//不同級別之間的距離。
                    nodeSpacing:260,// 自由軸上節點之間的最小距離,這僅適用於初始布局。如果啟用物理，則節點距離將存在有效的節點距離。
                    treeSpacing:260,//不同樹木之間的距離（獨立網絡）
                    blockShifting: false, // 每個節點都會檢查空白，並盡可能地將它的分支與它一起移動，並在任何級別上考慮nodeSpacing
                    edgeMinimization: false, // 每個節點將嘗試沿其自由軸移動以減少其邊緣的總長度
                    parentCentralization: false, // 如果為true，則布局算法完成后，父節點將再次居中。
                    direction:'UD', // UD, DU, LR, RL
                    sortMethod: 'directed' // directed hubsize
                }
            },

            manipulation: {
                enabled: true,
                addNode: function(data,callback){
                    document.getElementById('node-type').value = "1";
                    document.getElementById('node-label').value = "";
                    document.getElementById('saveButton').onclick = saveData.bind(this, data, callback);
                    document.getElementById('cancelButton').onclick = clearPopUp.bind();
                    document.getElementById('network-popUp').style.display = 'block';
                },
                editNode: function(data,callback){
                        document.getElementById('node-label').value = deviceName;
                        document.getElementById('saveButton').onclick = saveEditData.bind(this, data, callback);
                        document.getElementById('cancelButton').onclick = cancelEdit.bind(this,callback);
                        document.getElementById('network-popUp').style.display = 'block';
                    }
                },
                deleteNode: function(data,callback){
                        // do something
                        if(isDo){
                            callback(data); // 操作成功
                        }else{
                            callback(null); // 操作失敗
                        }
                },
                addEdge: function (data, callback) {
                        // do something
                        if(isDo){
                            callback(data); // 操作成功
                        }else{
                            callback(null); // 操作失敗
                        }
                },
                editEdge: false, // 關系不可編輯
                deleteEdge: function(data,callback){
                        // do something
                        if(isDo){
                            callback(data); // 操作成功
                        }else{
                            callback(null); // 操作失敗
                        }
                }
            },
            interaction: {
                hover: true,
                navigationButtons: true, // 如果為真，則在網絡畫布上繪制導航按鈕。這些是HTML按鈕，可以使用CSS完全自定義。
                keyboard: {
                    enabled: true,
                    speed: {
                        x: -1,
                        y: -1,
                        zoom: 0.02
                    },
                    bindToWindow: false
                } // 啟用鍵盤快捷鍵
            },
            physics: { // 采用分層布局系統，關閉物理布局
                enabled: false,
                stabilization: false,
                barnesHut: {
                    centralGravity: 8, // 中心重力吸引器將整個網絡拉回中心
                    springLength: 80, // 邊緣被建模為彈簧。這個彈簧長度是彈簧的剩余長度
                    gravitationalConstant: -80000, // 重力吸引。我們喜歡排斥 所以價值是負數。如果你想要排斥力更強，減小值（所以-10000，-50000）。
                    avoidOverlap: 0.2, // 接受范圍：[0 .. 1]。當大於0時，會考慮節點的大小。該距離將由重力模型的節點的包圍圓的半徑計算。值1是最大重疊避免。
                    damping: 0.3,
                    springConstant: 0.5
                },
                minVelocity: 16 // 一旦達到所有節點的最小速度，我們假設網絡已經穩定，仿真停止。
// stabilization: {//如果開啟，下面注釋掉的監聽圖形繪制過程的函數才會生效
// enabled:true,
// iterations:2000,
// updateInterval:25
// }
            }
        };
查詢設備
    /** * 查找設備 * @param name 設備名稱/SN/MAC */
    function findDevice(name){
        var nodes = network.body.data.nodes._data;
        for(var i in nodes){
            if(nodes[i].label== name || nodes[i].hostSn == name || nodes[i].hostMac == name){ // 具體需要可在此配置
                network.focus(nodes[i].id,{
                    scale:2
                });
                return
            }
        }
        layer.msg("查找的設備不存在！", {icon: 5});
    }

 
 
參考：vis.js 小記 - river、的博客 - CSDN博客
https://blog.csdn.net/qq_39759115/article/details/78594831
 
 
 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Vis.js – 基於瀏覽器的動態 JavaScript 可視化庫 用vis.js庫實現Neo4j的可視化 【開源】書簽可視化並做成瀏覽器插件 在react中使用vis.js 遠程連接服務器jupyter notebook、瀏覽器以及深度學習可視化方法 Solr7.7安裝，過瀏覽器可以看到Solr界面，進行可視化操作 瀏覽器四種可視化方案html/css、svg、canvas、webgl比較 javascript修改瀏覽器title方法 JS動態修改瀏覽器標題 JAVASCRIPT修改瀏覽器TITLE方法 JS動態修改瀏覽器標題 selenium實現無可視化瀏覽器以及反檢測
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM