基于vis.js实现网络拓扑图等关系图谱
vis.js是一个动态的、基于浏览器的可视化库。该库被设计为易于使用，可以处理大量动态数据，并支持对数据的操作和与数据的交互。该库由组件DataSet, Timeline, Network, Graph2d和Graph3d组成。
现在使用vis.js实现一个简单的网络类似网络拓扑的关系图谱，效果如下图所示：
实现的示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>网络拓扑图</title>
<script
type="text/javascript"
src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"
></script>
<!--
如果上述js无法加载，请改用此地址加载
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
-->
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
p {
max-width: 600px;
}
</style>
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">
// 创建节点数组
var nodes = new vis.DataSet([
{ id: 1, label: "Node 1" ,fixed:true,image:"https://s11.ax1x.com/2022/03/22/qMuYbq.jpg",shape: "image"},
{ id: 2, label: "Node 2" ,fixed:true,image:"https://s11.ax1x.com/2022/03/22/qMMzbn.jpg",shape: "image"},
{ id: 3, label: "Node 3" ,fixed:true,image:"https://s11.ax1x.com/2022/03/22/qMQebR.jpg",shape: "image"},
{ id: 4, label: "Node 4" ,fixed:true,image:"https://s11.ax1x.com/2022/03/22/qMQC5V.jpg",shape: "image"},
{ id: 5, label: "Node 5" ,fixed:true,image:"https://s11.ax1x.com/2022/03/22/qMQAv4.jpg",shape: "image"},
]);
// 创建一个有边的数组
var edges = new vis.DataSet([
{ from: 1, to: 2},
{ from: 2, to: 3 },
{ from: 2, to: 4 },
{ from: 2, to: 5 },
]);
// 创建网络
var container = document.getElementById("mynetwork");
var data = {
nodes: nodes,
edges: edges,
};
var options = { layout: { hierarchical: true} };
var network = new vis.Network(container, data, options);
</script>
</body>
</html>
上述库在uniapp中和Vue项目中也可以使用，示例代码如下(注意：下面的示例代码在app端可能存在问题，博主正在解决中)：
<template>
<view id="mynetwork"></view>
</template>
<script setup>
import {ref,onMounted} from "vue";
onMounted(()=>{
drowNetWorkPic()
})
// 绘制网络拓扑
// 绘制网络拓扑
const drowNetWorkPic = () => {
console.log("绘制网络拓扑图");
var EDGE_LENGTH_MAIN = 150;
// create an array with nodes
var nodes = new vis.DataSet([{
id: 1,
label: "防火墙",
image: "https://upload.wikimedia.org/wikipedia/zh/d/d8/Windows_Firewall_Icon.png",
shape: "image",
fixed: true
},
{
id: 2,
label: "网络交换机",
image: "https://pic.pngsucai.com/00/13/36/172dade1a31a5005.webp",
shape: "image",
fixed: true
},
{
id: 103,
label: "智能摄像头",
image: "./static/icon/camera-five.svg",
shape: "image",
fixed: true
},
{
id: 104,
label: "智能终端",
image: "./static/icon/devices.svg",
shape: "image",
fixed: true
},
{
id: 105,
label: "智能路由器",
image: "./static/icon/router.svg",
shape: "image",
fixed: true
},
]);
// 创建一个有边的数组
var edges = new vis.DataSet([{
from: 1,
to: 2,
length: 20
},
{
from: 2,
to: 103,
length: EDGE_LENGTH_MAIN
},
{
from: 2,
to: 104,
length: EDGE_LENGTH_MAIN
},
{
from: 2,
to: 105,
length: EDGE_LENGTH_MAIN
},
]);
// 创建网络
var container = document.getElementById("mynetwork");
var data = {
nodes: nodes,
edges: edges,
};
var options = {
layout: {
hierarchical: true
}
};
var network = new vis.Network(container, data, options);
// 点击事件
network.on('click',function(properties){
console.log("properties:",properties);
})
}
</script>
<style scoped>
/* 网络拓扑图 */
#mynetwork {
margin: 0 auto;
width: 90%;
height: 400px;
border: 1px solid lightgray;
}
</style>
基于vis.js实现网络拓扑图等关系图谱的更多相关文章
- 快速开发基于 HTML5 网络拓扑图应用
采用 HT 开发网络拓扑图非常容易,例如<入门手册>的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/e ...
- 基于Web实现网络拓扑图
想想好像好久没用写博客了! 由于最近想跳槽了(ps:尽管公司挽留,提出一些异与往常的挽留“制度”,But确实已经死心了) ,发现前一段时间一些做Hadoop,和Spark同事时常来请教网络拓扑图的有关 ...
- Vis.js – 基于浏览器的动态 JavaScript 可视化库
Vis.js 是一个动态的,基于浏览器的可视化库.该库被设计为易于使用,能处理大量的动态数据.该库由以下几部分组成:一是数据集和数据视图,基于灵活的键/值数据集,可以添加,更新和删除项目,订阅数据集变 ...
- 快速开发基于 HTML5 网络拓扑图应用1
今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用,HT 内部封装了一个拓扑图形组件 ht.graph.GraphView(以下简称 GraphView)是 HT 框架中 2D ...
- 基于HTML5的网络拓扑图(1)
什么是网络拓扑 网络拓扑,指构成网络的成员间特定的排列方式.分为物理的,即真实的.或者逻辑的,即虚拟的两种.如果两个网络的连接结构相同,我们就説它们的网络拓扑相同,尽管它们各自内部的物理接线.节点间距 ...
- Relation.js——基于pixi.js的拓展模块之人物关系图谱
出于[重构基于D3的关系图谱项目]的目的,在看完pixi.js之后,并且网上又没有现成的基于webgl的关系图谱js库,于是,本人决定自己写一个. 因为平常要工作的原因,进度可能有点慢,但是githu ...
- 基于网络拓扑图通过RCMS对网络进行配置
目录 基于网络拓扑图通过RCMS对网络进行配置 一些基本命令 对网络拓扑图1的简单配置 二层交换机S3 三层交换机 S2 实验结果 对网络拓扑图2的简单配置 NAT.ACL配置公网IP 基于网络拓扑图 ...
- 基于 HTML5 Canvas 绘制的电信网络拓扑图
电信网结构(telecommunication network structure)是指电信网各种网路单元按技术要求和经济原则进行组合配置的组合逻辑和配置形式.组合逻辑描述网路功能的体系结构,配置形式 ...
- 动态可视化库Vis.js：社交关系谱
Form Here:http://code.csdn.net/news/2819345 Vis.js 是一个动态的.基于浏览器的可视化库,可处理大量的动态数据并能与这些数据进行交互操作.该项目是由Al ...
- 基于Node.js + jade + Mongoose 模仿gokk.tv
原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 关于gokk 大学的娱乐活动基本就是在寝室看电影了→_→,一般都会选择去goxiazai.cc上看,里面的资源多,质量高 ...
随机推荐
- [tldr] 使用ip.sb检查自己所在局域网的公网IP
使用ip a等一些命令行工具可以帮助我们检查自己的内网IP,但是,如何获取自己的在公网下的IP(即当前所在的局域网被分配的公网IP) 如果使用爬虫,这个IP也是很重要的.BAN IP就是这个IP ht ...
- jquery的radio的change事件
一.用的jquery的radio的change事件:当元素的值发生改变时,会发生 change 事件,radio选择不同name值选项的时候恰巧是值发生改变 表单单选框 <input type= ...
- 分享一个我遇到过的“量子力学”级别的BUG。
你好呀,我是歪歪. 前几天在网上冲浪的时候,看到知乎上的这个话题: 一瞬间,一次历史悠久但是记忆深刻的代码调试经历,"刷"的一下,就在我的脑海中蹦出来了. 虽然最终定位到的原因令人 ...
- linux的zip命令详解 | Linux文件打包成Zip的命令和方法
zip 命令用来压缩文件 参数: -A:调整可执行的自动解压缩文件: -b<工作目录>:指定暂时存放文件的目录: -c:替每个被压缩的文件加上注释: -d:从压缩文件内删除指定的文件: - ...
- 几个技巧，教你去除文章的 AI 味！
最近有不少朋友在利用 AI 写毕业设计论文,几秒钟一篇文章就刷出来的,爽的飞起. 结果万万没想到,人家论文查重服务也升级了,是不是用 AI 写的论文大概率都能被查出来... 这可如何是好啊?救救我救救 ...
- JDK 24 发布，新特性解读！
真快啊!Java 24 这两天已经正式发布啦!这是自 Java 21 以来的第三个非长期支持版本,和 Java 22.Java 23一样. 下一个长期支持版是 Java 25,预计今年 9 月份发布. ...
- SpringBoot+微信支付-JSAPI
引入微信支付SDK Maven: com.github.wechatpay-apiv3:wechatpay-java-core:0.2.12 Maven: com.github.wechatpay-a ...
- 万字长文详解SIFT特征提取
本文对 SIFT 算法进行了详细梳理.SIFT即尺度不变特征变换(Scale-Invariant Feature Transform),是一种用于检测和描述图像局部特征的算法.该算法对图像的尺度和旋转 ...
- 什么是 Gork ?
Grok 是埃隆·马斯克旗下的人工智能公司 xAI 的开发的一系列大型语言模型 (LLMs)产品,包括Grok 1.Grok 2和即将发布的Grok 3. 受<银河系漫游指南>的启发,Gr ...
- 推荐Linux命令行运维工具: Wowkey--实现自动化批量化标准化
WowKey命令行运维工具,Linux设备的自动化.批量化.标准化的运维解决方案,解放运维人,提升企业运维效率和质量. 有人能理解做设备的运营维护工作的痛苦所在吗? 如果你的运维工作中,只维护个位数数 ...