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实现网络拓扑图等关系图谱的更多相关文章

  1. 快速开发基于 HTML5 网络拓扑图应用

    采用 HT 开发网络拓扑图非常容易,例如<入门手册>的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/e ...

  2. 基于Web实现网络拓扑图

    想想好像好久没用写博客了! 由于最近想跳槽了(ps:尽管公司挽留,提出一些异与往常的挽留“制度”,But确实已经死心了) ,发现前一段时间一些做Hadoop,和Spark同事时常来请教网络拓扑图的有关 ...

  3. Vis.js – 基于浏览器的动态 JavaScript 可视化库

    Vis.js 是一个动态的,基于浏览器的可视化库.该库被设计为易于使用,能处理大量的动态数据.该库由以下几部分组成:一是数据集和数据视图,基于灵活的键/值数据集,可以添加,更新和删除项目,订阅数据集变 ...

  4. 快速开发基于 HTML5 网络拓扑图应用1

    今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用,HT 内部封装了一个拓扑图形组件 ht.graph.GraphView(以下简称 GraphView)是 HT 框架中 2D ...

  5. 基于HTML5的网络拓扑图(1)

    什么是网络拓扑 网络拓扑,指构成网络的成员间特定的排列方式.分为物理的,即真实的.或者逻辑的,即虚拟的两种.如果两个网络的连接结构相同,我们就説它们的网络拓扑相同,尽管它们各自内部的物理接线.节点间距 ...

  6. Relation.js——基于pixi.js的拓展模块之人物关系图谱

    出于[重构基于D3的关系图谱项目]的目的,在看完pixi.js之后,并且网上又没有现成的基于webgl的关系图谱js库,于是,本人决定自己写一个. 因为平常要工作的原因,进度可能有点慢,但是githu ...

  7. 基于网络拓扑图通过RCMS对网络进行配置

    目录 基于网络拓扑图通过RCMS对网络进行配置 一些基本命令 对网络拓扑图1的简单配置 二层交换机S3 三层交换机 S2 实验结果 对网络拓扑图2的简单配置 NAT.ACL配置公网IP 基于网络拓扑图 ...

  8. 基于 HTML5 Canvas 绘制的电信网络拓扑图

    电信网结构(telecommunication network structure)是指电信网各种网路单元按技术要求和经济原则进行组合配置的组合逻辑和配置形式.组合逻辑描述网路功能的体系结构,配置形式 ...

  9. 动态可视化库Vis.js：社交关系谱

    Form Here:http://code.csdn.net/news/2819345 Vis.js 是一个动态的.基于浏览器的可视化库,可处理大量的动态数据并能与这些数据进行交互操作.该项目是由Al ...

  10. 基于Node.js + jade + Mongoose 模仿gokk.tv

    原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 关于gokk 大学的娱乐活动基本就是在寝室看电影了→_→,一般都会选择去goxiazai.cc上看,里面的资源多,质量高 ...

随机推荐

  1. CAD通过XCLIP命令插入DWG参照裁剪图形，引用局部图像效果（CAD裁剪任意区域）

    CAD通过XCLIP命令插入DWG参照裁剪图形,实现引用局部图像效果,裁剪任意区域! 1.首先在你要引用局部图的文件内,插入参照! 2. 然后再空白区域指定插入点,输入比例因子,默认输入1,然后缩小视 ...

  2. RANSAC---从直线拟合到特征匹配去噪

    Ransac全称为Random Sample Consensus,随机一致性采样.该方法是一种十分高效的数据拟合方法.我们通过最简单的拟合直线任务来了解这种方法思路,继而扩展到特征点匹配中的误点剔除问 ...

  3. BUUCTF---bbbbbras

    题目 p = 177077389675257695042507998165006460849 n = 3742182950988779627489716224936732940098864714561 ...

  4. 基于.NetCore开发 StarBlog 番外篇 (1) StarBlog Publisher，跨平台一键发布，DeepSeek加持的文章创作神器

    前言 我一直在优化发布文章的工作流 之前的 StarBlog 已经支持文章打包上传(将 Markdown 和图片文件一并打包为 ZIP 格式上传),但还是有不少步骤,重复的次数多了,还是感觉麻烦. 为 ...

  5. 【Spring】JdbcTemplate的使用方法

    概念和准备 什么是 JdbcTemplate Spring 框架对 JDBC 进行封装,使用 JdbcTemplate 方便实现对数据库操作 准备工作 引入相关 jar 包 在 spring 配置文件 ...

  6. Gin CORS

    Go 语言手搓一个简单的跨域还是比较容易的, 但自己手搓一批通用代码总归还是麻烦了点. 如果使用 Gin 的话, 有现成的跨域中间件可以用. github.com/gin-contrib/cors 注 ...

  7. leetcode每日一题：监控二叉树

    引言 ​ 今天的每日一题原题是2643. 一最多的行,直接模拟,切除和最大的一行即可.更换成前几天遇到的更有意思的一题来写这个每日一题. 题目 968. 监控二叉树 给定一个二叉树,我们在树的节点上安 ...

  8. zk源码—1.数据节点与Watcher机制及权限

    大纲 1.ZooKeeper的数据模型.节点类型与应用 (1)数据模型之树形结构 (2)节点类型与特性(持久 + 临时 + 顺序 ) (3)节点的状态结构(各种zxid + 各种version) (4 ...

  9. 【U-Boot】解决U-Boot的“Unknown command 'help' - try 'help'”问题

    [U-Boot]解决U-Boot的"Unknown command 'help' - try 'help'"问题 零.起因 最近在玩U-Boot,自己编译U-Boot之后输入hel ...

  10. Audio DSP boot 过程

    在智能手机或智能手表等SoC上通常有一块专门的audio DSP(简称ADSP)来做音频处理.要做音频处理,ADSP首先要被boot起来.本文以CEVA BX2为例来讲讲ADSP的boot过程. 在上 ...