使用vis-network进行图数据库可视化（一）
什么是vis-network
vis-network是vis.js可视化库中的一个组件。主要用于网络可视化需求，支持自定义形状、样式、颜色、大小、图像等。vis-network可以在任务现代浏览器上流畅展示多达上千个nodes（节点）和edges（边），也支持cluster（集群），使用canvas渲染。作为图数据库可视化工具使用，效果很好。
注意：nodes、edges上千之后，已经出现卡顿现象，亲测还是小数据量下可视化效果较为理想
安装
1.npm安装
npm install vis-network
2.umd引入
<script type="text/javascript" src="../../../standalone/umd/vis-network.min.js"></script>
Demo
<!DOCTYPE html>
<html>
<head>
<title>Vis Network | Basic usage</title>
<script type="text/javascript" src="./vis-network.min.js"></script>
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<p>Create a simple network with some nodes and edges.</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
const 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" },
]);
// create an array with edges
const edges = new vis.DataSet([
{ from: 1, to: 3 },
{ from: 1, to: 2 },
{ from: 2, to: 4 },
{ from: 2, to: 5 },
{ from: 3, to: 3 },
]);
// create a network
const container = document.getElementById("mynetwork");
const data = {
nodes: nodes,
edges: edges,
};
const options = {};
const network = new vis.Network(container, data, options);
</script>
</body>
</html>
官网demo示例：https://visjs.github.io/vis-network/examples/network/basicUsage.html
从demo中可以看到，使用vis-network非常简单，只需要设置container、data、options三个参数就行。其中container为HTML DOM元素，不做介绍，重点介绍下data和options。
datas数据
data参数主要设置nodes和edges两个数据项，且都支持数据和vis.DataSet两种类型。具体nodes和edges的配置同下文options.nodes和options.edges。
interface Data {
nodes?: Node[] | DataInterfaceNodes;
edges?: Edge[] | DataInterfaceEdges;
}
1.数组格式
const nodes = [
{id: 1, label: 'Node 1', color: 'red'},
{id: 2, label: 'Node 2', color: 'green'},
{id: 3, label: 'Node 3', color: 'blue'},
]
const edges = [
{id: 1, from: 1, to: 2},
{id: 2, from: 2, to: 3},
{id: 3, from: 3, to: 1},
]
const datas = {
nodes: nodes,
edges: edges,
}
2.DataSet格式
使用示例见前文demo。
3.两者之间区别
1、DataSet有add、update、remove、clear等方法，可在初始渲染后对数据进行单独增删改操作，可进行双击查询关联node等操作（示例1，示例2）；
2、DataSet数据量较大时，存在一定耗时；
4.从Gephi导入数据
Network可以直接从gephi导出的json文件中导入数据。示例
options配置项
const options = {
autoResize: true,
height: '100%',
width: '100%'
locale: 'en',
locales: locales,
clickToUse: false,
configure: {...}, // 详细配置请查看'配置'模块，
edges: {...}, // 详细配置请查看'边'模块，
nodes: {...}, // 详细配置请查看'节点'模块，
groups: {...}, // 详细配置请查看'组'模块，
layout: {...}, // 详细配置请查看'布局'模块，
interaction: {...}, // 详细配置请查看'交互'模块，
manipulation: {...}, // 详细配置请'可视化操作'模块，
physics: {...}, // 详细配置请查看'物理引擎'模块，
}
configure
可配置一些vis-network自带的工具项，设置样式、模型等，并能够根据用户设置生成配置项，不过实际使用过程中用到的不多。略~
nodes节点
配置节点的样式。也可以在data中配置每个节点的属性，data中的单个节点配置项将覆盖全局配置。参考
nodes: {
shape: "circle",
widthConstraint: { maximum: 100 },
scaling: {
min: 10,
max: 30,
},
font: {
size: 12,
face: "Tahoma",
},
}
edges边
配置边的样式。参考
edges: {
width: 0.15,
arrows: {
to: {
type: "arrow",
enabled: true,
},
},
length: 120,
color: { inherit: "from" },
smooth: {
type: "continuous",
},
}
groups组
定义每个组的样式，除了id、x、y之外，其余和node的配置项相同。
const nodes = [
{
id:1,
group:'myGroup', // 组名 myGroup
label:"I'm in a custom group called 'myGroup'!",
},
]
const options = {
groups: {
// 定义 myGroup组的样式
myGroup: {
color:{background:'red'}, borderWidth:3
}
}
}
layout布局
充当canvas上的摄像机，进行动画、缩放和对焦。
interaction交互
用于与关系网的所有用户交互。处理鼠标和触摸事件等。
manipulation可视化操作
配置vis-network自带的添加节点、添加边、编辑节点、编辑边、删除节点、删除边等工具按钮。
physics物理引擎
处理物理模拟，移动节点和边以清晰地显示它们。
cluster集群
集群配置项是提供给集群方法的配置对象。主要设置集群的样式、已经集群聚合的逻辑。参考
clusterByColor() {
network.setData(data);
const colors = ["orange", "lime", "DarkViolet"];
let clusterOptionsByData;
for (let i = 0; i < colors.length; i++) {
let color = colors[i];
clusterOptionsByData = {
// joinCondition参数设置聚合逻辑
joinCondition: childOptions => {
return childOptions.color.background == color; // the color is fully defined in the node.
},
// processProperties参数可修改聚合点的属性
processProperties: (
clusterOptions,
childNodes,
childEdges
) => {
let totalMass = 0;
for (let i = 0; i < childNodes.length; i++) {
totalMass += childNodes[i].mass;
}
clusterOptions.mass = totalMass;
return clusterOptions;
},
// 初始设置聚合点属性
clusterNodeProperties: {
id: "cluster:" + color,
borderWidth: 3,
shape: "database",
color: color,
label: "color:" + color,
},
};
network.cluster(clusterOptionsByData);
}
}
集群相关方法和事件在后文全局方法和事件中
methods方法
列举一些平时较为常用的方法，全量方法可参考中文文档
destroy()
从dom上移出network实例，dom仍然存在
const network = vis.network(container, data, options)
network.destroy()
setData({nodes, edges})
覆盖关系图中的所有数据
network.setData({
nodes: [...],
edges: [...]
})
or
network.setData({
nodes: vis.DataSet([...]),
edges: vis.DataSet([...])
})
on、off、once
事件监听，常规的，略~
cluster(options)
手动进行集群操作
clusterOptionsByData = {
joinCondition: function (childOptions) {
return childOptions.color.background === color; // the color is fully defined in the node.
},
processProperties: function (
clusterOptions,
childNodes,
childEdges
) {
var totalMass = 0;
for (var i = 0; i < childNodes.length; i++) {
totalMass += childNodes[i].mass;
}
clusterOptions.mass = totalMass;
return clusterOptions;
},
clusterNodeProperties: {
id: "cluster:" + color,
borderWidth: 3,
shape: "database",
color: color,
label: "color:" + color,
},
};
network.cluster(clusterOptionsByData);
clusterByConnection(nodeId,[options])
将指定的节点、与其连接的节点组成一个集群
network.clusterByConnection(1);
clusterByHubsize([hubsize],[options])
设置当节点连接的边超过一定数量（hubsize）后聚合
var clusterOptionsByData = {
processProperties: function (clusterOptions, childNodes) {
clusterOptions.label = "[" + childNodes.length + "]";
return clusterOptions;
},
clusterNodeProperties: {
borderWidth: 3,
shape: "box",
font: { size: 30 },
},
};
network.clusterByHubsize(undefined, clusterOptionsByData);
clusterOutliers([options])
将所有具有1个边的节点与它们各自的连接节点组成一个集群，就是将最边缘的叶子节点和它连接的节点聚合
network.clusterOutliers();
isCluster(nodeId)
判断id=nodeId的节点是否为集群
network.on("selectNode", function (params) {
if (params.nodes.length == 1) {
if (network.isCluster(params.nodes[0]) == true) {
network.openCluster(params.nodes[0]);
}
}
});
openCluster(nodeId[, options])
打开集群。nodeId为集群id；options可选，目前只支持一个选项releaseFunction，该函数可用于在集群打开后手动定位节点（用的不多）
// 同isCluster
stabilize([iterations])
稳定布局。iterations参数可选，指定迭代次数。数据量小时，可以快速稳定布局，满足部分业务需求。数据量较大时，慎用！比较耗时，卡顿感和明显。
network.stabilize();
network.stabilize(20);
fit([options])
缩放所有节点以适应canvas
network.fit()
events事件
全量事件文档请参考中文文档
常用事件如下：
- click 左键单击，network全局
- doubleClick 双击，network全局
- oncontext 右键单击，network全局
- selectNode 选中节点
- selectEdge 选中边
- deselectNode 取消选中节点
- deselectEdge 取消选中边
- hoverNode 鼠标悬浮节点
- hoverEdge 鼠标悬浮边
- blurNode 从节点移开
- blurEdge 从边移开
- startStabilizing 开始稳定
- stabilizationIterationsDone 稳定结束
按个暂停
先把vis-network介绍部分写完，下篇介绍可视化工具
806
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
