一、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/n/155282.html
微信扫一扫 
支付宝扫一扫 