基于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上看,里面的资源多,质量高 ...
随机推荐
- grpc unable to determine Go import path for
前言 在 proto 文件夹下执行如下命令: $ protoc --go_out=plugins=grpc:. *.proto 报错:无法确定Go导入路径 protoc-gen-go: unable ...
- 基础指令:三剑客之sed、三剑客之awk详解
目录 4.9 三剑客之sed(查找.替换.删除.插入) 作用: 语法格式: 4.9.1 sed指定行输出 [行数]p 4.9.2 sed模糊搜索 /[字符串]/p 4.9.3 按照区间进行过滤查找 [ ...
- MySQL-redo log 和 binlog
redo log部分 为什么需要redo log? 简单的说,如果每次更新数据库的操作,都去更新磁盘的话,开销是很大的.通过引入redo log日志,其中记录了每次更新的操作明细,在系统不繁忙的时候, ...
- 【SpringCloud】Ribbon负载均衡调用
Ribbon负载均衡调用 概述 是什么 Spring Cloud Ribbon是基于Netlix Ribbon实现的一套客户端负载均衡的工具. 简单的说,Ribbon是Netflix发布的开源项目, ...
- Flutter 2025 年产品路线图发布
每一年 Google Flutter 团队都会发布一份产品路线图,包括 Flutter 框架和 Dart 编程语言,让开发者能够了解官方团队的优先事项,并据此做出自己的计划安排. 产品路线图也会随着客 ...
- vivo Trace 监控追求极致的建设历程
作者:vivo 互联网服务器团队- Zhang Yi 当前vivo的应用监控产品Vtrace经常遇到用户反馈某个Trace链路信息没法给他们提供到实质的帮肋,对此团队一直在持续完善JavaAgent的 ...
- 使用python批量爬取wallhaven.cc壁纸站壁纸
偶然发现https://wallhaven.cc/这个壁纸站的壁纸还不错,尤其是更新比较频繁,用python写个脚本爬取 点latest,按照更新先后排序,获得新地址,发现地址是分页展示的,每一页24 ...
- python，爬取小说网站小说内容，同时每一章存在不同的txt文件中
思路,第一步小说介绍页获取章节地址,第二部访问具体章节,获取章节内容 具体如下:先获取下图章节地址 def stepa(value,headers): lit=[] response = reques ...
- 『Plotly实战指南』--在科学数据可视化中的应用（下）
科学数据往往涉及多个维度,例如分子结构中的空间坐标.物理实验中的时间序列以及化学反应中的温度变化等. 传统的二维可视化方法已经难以满足这些复杂数据的展示需求. 而Plotly,作为一种强大的可视化库, ...
- Map延伸工具类之“根据value值得到map的key值”“根据value值得到map的keys值”
Map延伸工具类 /** * 集合类型转换 * */ public class CollectionUtil { /** * 根据value值得到map的key值 * @author wzw * * ...