一、vis.js官網
vis.js是一個基於HTML5 Canvas的可視化工具庫，可以用於可視化網路、流程圖、拓撲圖等各種類型的關係數據。
使用vis.js需要引入官方提供的vis-network.js腳本和vis-network.min.css樣式表。
下面是vis.js官網提供的一個簡單示例：
<!doctype html>
<html>
<head>
<title>Basic Example Network</title>
<script type="text/javascript" src="vis-network.js"></script>
<link rel="stylesheet" href="vis-network.min.css" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">
var nodes = new vis.DataSet([
{ id: 1, label: "Node 1" },
{ id: 2, label: "Node 2" },
{ id: 3, label: "Node 3" },
{ id: 4, label: "Node 4" },
{ id: 5, label: "Node 5" }
]);
var edges = new vis.DataSet([
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 2, to: 4 },
{ from: 2, to: 5 }
]);
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>
二、vis.js拓撲圖新增連線
在vis.js拓撲圖中，通過添加edges數組中的數據來表示拓撲圖的連線，而新增一條連線需要在edges數組中添加一條新的數據，並通過調用network.setData()方法來重新載入數據。下面是一個示例：
var edges = new vis.DataSet([
{from: 1, to: 2},
{from: 2, to: 3},
{from: 3, to: 1}
]);
function addEdge() {
edges.add({
from: 4,
to: 5
});
network.setData({edges: edges});
}
三、vis.js文檔
vis.js官網提供了完善的API參考文檔和示例代碼，可以滿足大部分使用需求。同時，vis.js還提供了在線互動式示例，可以直接在瀏覽器中測試可視化效果。由於文檔較為詳細，這裡不再贅述。
四、vis.js拓撲圖
vis.js拓撲圖是一種可以用來展示帶有關係的節點之間的圖形結構的數據結構。在vis.js拓撲圖中，需要先定義nodes數組來表示節點信息，然後通過edges數組來表示節點之間的關係。
下面是一個簡單的vis.js拓撲圖示例：
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);
var edges = new vis.DataSet([
{from: 1, to: 2},
{from: 1, to: 3},
{from: 2, to: 4},
{from: 2, to: 5}
]);
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var container = document.getElementById('myvis');
var network = new vis.Network(container, data, options);
五、vis.js卡頓
在vis.js中，當節點數量過多時可能會出現卡頓的情況。這個時候可以通過下面幾種方法來優化性能：
1、使用Web Worker：vis.js提供了這個功能，它可以讓vis.js的計算過程在後台線程中進行，不會影響其他的頁面渲染。
2、用力布局：
var options = {
layout: {
hierarchical: {
direction: 'UD'
}
}
};
這個示例中，我們將拓撲圖布局方式改為上下布局，從而減輕了節點重疊的問題。
六、vis.js節點搜索
vis.js提供了一個用於搜索節點的API方法：searchNodes(query, [style]).
其中，query是搜索的關鍵詞，style用於指定搜索結果的呈現樣式，如果style參數被省略，則搜索結果默認以一個紅色的「繭形」呈現。
function findNode() {
var searchQuery = document.getElementById("search-box").value;
var nodes = new vis.DataView(network, {filter: function (item) {return item.group !== 'hidden';}});
var searchResult = nodes.get({
fields: ['id', 'label'],
filter: function (item) {
return item.label.indexOf(searchQuery) !== -1;
}
});
var style = [{borderWidth: 2, color: {background:'red'}}];
network.selectNodes([searchResult[0].id]);
network.focus(searchResult[0].id, {animation: true, scale: 1.0, locked: true});
network.setSelection(searchResult[0].id, { nodes: style, edges: style });
}
七、vis.js 畫地圖
vis.js提供了一個名為GeoLayout的布局，它能夠將節點以地圖的形式展現出來，從而便於展示全球範圍內的節點關係。下面是一個使用GeoLayout的vis.js示例：
var data = {
nodes: new vis.DataSet([
{id: 1, label: 'New York', group: 1, lat: 40.71, lng: -74.00},
{id: 2, label: 'London', group: 1, lat: 51.50, lng: -0.12},
{id: 3, label: 'Tokyo', group: 2, lat: 35.69, lng: 139.69},
{id: 4, label: 'Shanghai', group: 2, lat: 31.23, lng: 121.47},
{id: 5, label: 'Beijing', group: 2, lat: 39.92, lng: 116.38}
]),
edges: new vis.DataSet([
{from: 1, to: 2},
{from: 2, to: 3},
{from: 2, to: 4},
{from: 2, to: 5}
])
};
var options = {
layout: {
randomSeed: 2,
improvedLayout: true,
hierarchical: {
enabled:false
},
geoLayout:{
minSmoothness: 0.65
}
},
groups: {
1:{color:{background:'white', border:'black'}}
},
physics:{
stabilization: {iterations: 2500},
barnesHut: {gravitationalConstant: -2000}
}
};
var network = new vis.Network(container, data, options);
八、vis.js如何修改為中文
在vis.js官網提供的vis-network.min.css中，可以找到下面的內容：
.vis-network:hover {
cursor: pointer;
}
.vis-network {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
border-style: solid;
border-color: lightgray;
}
.vis-tooltip {
position: absolute;
padding: 6px 12px;
z-index: 10;
visibility: hidden;
border-style: solid;
border-width: 2px;
border-radius: 5px;
border-color: #666;
background-color: #fff;
text-align: left;
font-size: 14px;
line-height: 16px;
}
從上面的代碼中，可以看出vis.js中的一些字元串（如vis-tooltip）是用來展示提示信息的。如果希望更改vis.js的默認語言，可以把這些字元串替換為中文，從而實現界面的漢化。下面是vis.js中一些常用字元串的中文翻譯：
.vis-network:hover {
cursor: pointer;
}
.vis-network {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
border-style: solid;
border-color: lightgray;
}
.vis-tooltip {
position: absolute;
padding: 6px 12px;
z-index: 10;
visibility: hidden;
border-style: solid;
border-width: 2px;
border-radius: 5px;
border-color: #666;
background-color: #fff;
text-align: left;
font-size: 14px;
line-height: 16px;
}
/* 漢化後的字元串 */
.vis-network:hover {
cursor: pointer;
}
.vis-network {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
border-style: solid;
border-color: lightgray;
}
.vis-tooltip {
position: absolute;
padding: 6px 12px;
z-index: 10;
visibility: hidden;
border-style: solid;
border-width: 2px;
border-radius: 5px;
border-color: #666;
background-color: #fff;
text-align: left;
font-size: 14px;
line-height: 16px;
}
/* 漢化後的提示信息 */
.vis-tooltip {
position: absolute;
padding: 6px 12px;
z-index: 10;
visibility: hidden;
border-style: solid;
border-width: 2px;
border-radius: 5px;
border-color: #666;
background-color: #fff;
text-align: left;
font-size: 14px;
line-height: 16px;
}
九、vis.js網路拓撲圖節點坐標
vis.js網路拓撲圖節點的坐標問題有時會成為許多開發者的困擾。通常情況下，vis.js的節點位置是由布局引擎自動計算得出的。當我們嘗試改變節點位置時，可能會遇到位置自動重置的問題。下面是解決vis.js節點坐標問題的一些技巧：
1、鎖定節點位置
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1', x: 100, y: 100, fixed: true},
{id: 2, label: 'Node 2', x: 300, y: 100, fixed: true},
{id: 3, label: 'Node 3', x: 200, y: 200}
]);
2、關閉布局計算
var options = {
layout: {
hierarchical: {
enabled: false
}
},
physics: {
enabled: false
}
};
3、手動計算節點位置
function updatePosition() {
var node1 = network.getPositions([1])[1];
var node2 = network.getPositions([2])[2];
var x = (node1.x + node2.x) / 2原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/155282.html
微信掃一掃 
支付寶掃一掃 