vis.js 创建网络拓扑图

最新推荐文章于 2024-03-08 10:46:35 发布
最新推荐文章于 2024-03-08 10:46:35 发布
阅读量945 收藏 4
点赞数
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/allway2/article/details/121188887
版权

Vis Network | Node Styles | Images

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vis Network | Node Styles | Images</title>

    <style type="text/css">
      #mynetwork {
        width: 600px;
        height: 600px;
        border: 1px solid lightgray;
      }
    </style>

    <script
      type="text/javascript"
      src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"
    ></script>

    <script type="text/javascript">
      var nodes = null;
      var edges = null;
      var network = null;

      var DIR = "img/refresh-cl/";
      var EDGE_LENGTH_MAIN = 150;
      var EDGE_LENGTH_SUB = 50;

      // Called when the Visualization API is loaded.
      function draw() {
        // Create a data table with nodes.
        nodes = [];

        // Create a data table with links.
        edges = [];

        nodes.push({
          id: 1,
          label: "Main",
          image: DIR + "Network-Pipe-icon.png",
          shape: "image",
        });
        nodes.push({
          id: 2,
          label: "Office",
          image: DIR + "Network-Pipe-icon.png",
          shape: "image",
        });
        nodes.push({
          id: 3,
          label: "Wireless",
          image: DIR + "Network-Pipe-icon.png",
          shape: "image",
        });
        edges.push({ from: 1, to: 2, length: EDGE_LENGTH_MAIN });
        edges.push({ from: 1, to: 3, length: EDGE_LENGTH_MAIN });

        for (var i = 4; i <= 7; i++) {
          nodes.push({
            id: i,
            label: "Computer",
            image: DIR + "Hardware-My-Computer-3-icon.png",
            shape: "image",
          });
          edges.push({ from: 2, to: i, length: EDGE_LENGTH_SUB });
        }

        nodes.push({
          id: 101,
          label: "Printer",
          image: DIR + "Hardware-Printer-Blue-icon.png",
          shape: "image",
        });
        edges.push({ from: 2, to: 101, length: EDGE_LENGTH_SUB });

        nodes.push({
          id: 102,
          label: "Laptop",
          image: DIR + "Hardware-Laptop-1-icon.png",
          shape: "image",
        });
        edges.push({ from: 3, to: 102, length: EDGE_LENGTH_SUB });

        nodes.push({
          id: 103,
          label: "network drive",
          image: DIR + "Network-Drive-icon.png",
          shape: "image",
        });
        edges.push({ from: 1, to: 103, length: EDGE_LENGTH_SUB });

        nodes.push({
          id: 104,
          label: "Internet",
          image: DIR + "System-Firewall-2-icon.png",
          shape: "image",
        });
        edges.push({ from: 1, to: 104, length: EDGE_LENGTH_SUB });

        for (var i = 200; i <= 201; i++) {
          nodes.push({
            id: i,
            label: "Smartphone",
            image: DIR + "Hardware-My-PDA-02-icon.png",
            shape: "image",
          });
          edges.push({ from: 3, to: i, length: EDGE_LENGTH_SUB });
        }

        // create a network
        var container = document.getElementById("mynetwork");
        var data = {
          nodes: nodes,
          edges: edges,
        };
        var options = {};
        network = new vis.Network(container, data, options);
      }
    </script>
  </head>

  <body onload="draw()">
    <p>Display nodes as images.</p>
    <div id="mynetwork"></div>
  </body>
</html>

 

allway2
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
visjs使用小记-1.创建一个简单的网络拓扑图
onlyjin的博客
08-04 4348
使用visjs创建一个简单的网络拓扑图
使用visjs制作网络拓扑图
静子
08-08 1326
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdo...
网络拓扑图怎么画最好？
mengmeng_921的博客
12-28 1462
01 什么是网络拓扑（Topology）？网络拓扑是用于描述计算机网络环境（计算机、主机、网络设备等线路连接情况）的一种制图。1) 物理拓扑描述网络各节点的物理连接情况。2) 逻辑拓扑描述网络环境的逻辑结构（本文档主要探讨此种拓扑的绘制）。在计算机网络领域，网络拓扑是一个非常重要的工具。掌握专业的拓扑绘制技巧是从事数通工程的一个基本要求，一个专业的、规范的网络拓扑不仅仅能够清晰的、直观的呈现网络的逻辑结构，更有利于项目实施、运维管理、排错等等，也能够很好的呈现数通工程师的职业软技能。
使用 JsPlumb 绘制拓扑图的通用方法
weixin_30439067的博客
11-01 277
摘要： 实现JsPlumb 绘制拓扑图的通用方法。 只要服务端返回一个符合指定格式的数据结构，就可以绘制相应的拓扑图。 难度： 中级 示例工程见： http://download.csdn.net/detail/shuqin1984/6488513 一、 实现目标 ...
jsgraph,纯javascript脚本画图，实现web拓扑图
05-24
jsgraph,纯javascript脚本画图，支持大部分浏览器。可做web拓扑图
Vis.js--Network中文教程
热门推荐
divaliu1408的博客
11-06 2万+
英文文档：原文链接 Network Network可以可视化地展示networks（网络）以及networks包含的nodes（节点）和edges（边）。您可以轻易地使用Network自定义形状、样式、颜色、尺寸、图案等。Network可以在任何现代浏览器上流畅地展示多达上千个nodes和edges。另外，Network也支持cluster（集群），并使用HTML canvas进行渲染。 ...
vis.js network操作学习
最新发布
weixin_54106682的博客
03-08 787
网络是显示网络以及由节点和边组成的网络的可视化。可视化易于使用，并支持自定义形状、样式、颜色、尺寸、图像等。网络可视化可以在任何现代浏览器上顺利运行，最多可显示数千个节点和边缘。为了处理大量节点，网络提供了集群支持。Network 使用 HTML 画布进行渲染。
vis.js网络拓扑图第一个demo，vis-network.min.js的下载
笑到世界都狼狈的博客
09-09 1674
在vis.js的中文文档里有个demo，复制粘贴出来跑跑，是可以运行的 地址：https://ame.cool/pages/a7d858/#network-%E5%85%B3%E7%B3%BB%E5%9B%BE 1.源码是这样的，粘贴出来就可以跑： //源码 <html> <head> <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-netw
vis network（visjs）安装简单使用
YouZi_X的博客
11-24 4139
vis.js可视化的出发点之一是它们可以处理动态数据，并允许对数据进行操作。为了实现这一点，vis.js包括一个基于灵活键/值 DataSet并DataView处理非结构化JSON数据的功能。 数据集DataSet，存储JSON的ID对象。可增删改查，过滤排序… 资料检视DataView，提供数据集上经过过滤或格式化的视图。通过订阅DataView中的更改，获取过滤或格式化的数据，而无需一直指定过滤器和字段类型 数据管道DataPipe,DataPipe从一个DataSet 获取数据DataView，对其
d3.js实现简单的网络拓扑图实例代码
10-21
3. 初始化力导向布局（force layout）：d3.js的力导向布局是用于创建网络拓扑图的强大工具。它模拟节点间的相互作用力，包括引力、斥力和摩擦力，使节点自动布局。 ```javascript var force = d3.layout.force() ....
NetworkPrototype:基于vis.js的Folksome网络原型
05-06
"NetworkPrototype:基于vis.js的Folksome网络原型"是一个利用JavaScript库vis.js创建的网络原型示例，它提供了可视化网络拓扑结构的能力。 **vis.js库详解** vis.js是一个强大的开源JavaScript库，用于创建动态和...
vis拓扑图demo
07-23
这个"vis拓扑图demo"是使用vis.js库创建的一个示例，它展示了如何利用该库构建具有动态和立体效果的拓扑图表。拓扑图常用于表示网络、系统或流程中的组件以及它们之间的关系，这种可视化方式有助于理解复杂的系统...
jQuery人物关系拓扑图代码.zip
10-10
此外，可能还使用了jQuery的插件来增强功能，如D3.js或Vis.js，这些专门用于数据可视化的库可以帮助创建复杂的图表和网络图。 为了实现二次修改，开发者需要对HTML结构、CSS样式以及jQuery的事件处理机制有一定的...
js_拓扑图_级联拓扑图
08-14
要使用JavaScript创建拓扑图，我们可以选择现有的库，如D3.js、Vis.js或Cytoscape.js等。这些库提供了丰富的API和工具，帮助开发者轻松绘制复杂图形。例如，D3.js是一个强大的数据可视化库，可以与SVG、Canvas或HTML...
Graph Demo 人员图谱
07-21
总结起来，这个"Graph Demo 人员图谱"展示了如何利用JavaScript和vis.js库创建一个可视化的人员关系图。通过学习和实践这个Demo，开发者可以掌握图谱的基本构建方法，进一步提升数据可视化的技能。同时，这个Demo也...
个推图可视化应用实践
个推技术学院
07-01 5452
个推资深前端开发专家 东风 图可视化应用是数据可视化的一个重要组成部分。图指的是知识图谱（Knowledge Graph），此概念于2012年由Google正式提出，旨在帮助Google优化搜索引擎返回的结果，提升用户搜索质量及体验。 个推作为专业的数据智能服务商，在图可视化应用方面也进行了丰富的实践。本文将从四部分讲述图可视化应用：应用场景、组成部分、个推图可视化组件、个推图可视化展望。 （文末附视频版讲解及完整资料下载） 01 图可视化应用场景 ...
vue使用vis.js绘制拓扑；修改指定线条颜色
阿天的博客
04-12 1003
vue利用vis.js绘制拓扑，修改线条颜色，修改节点图标；
初识vis.js网络拓扑图,首先了解一下官方文档以及vis.js的中文文档
笑到世界都狼狈的博客
09-09 1万+
首先说明一下，为什么要学习这个东西，，，，因为我们项目中要做一个网络拓扑图，去年网上找了找用jtopo做的，然后大家说太丑了，操作也不好，反正言外之意就是要换个插件写，，，，然后我前两周就研究了一下echarts的树图和关系图graph,研究的结果我博客也有写，总的来说echarts蛮漂亮的，但是偏展示，后期如果要加很多扩展内容的话，不建议用。如果有需要可以去看echarts例子的可以去看看https://blog.csdn.net/qq_36509946/category_10330384.html 接
vis.js network，基本教程
王海虎的博客
07-18 1万+
这两天用到vis，写一个拖拽的效果，发现vis类的博客文章都特别少，可能用的人还不是特别的，vis目前没有中文文档，英文不好的同学可能有些头痛了，今天我给大家分享一下vis等经验。 1.第一步，先下载vis &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="./dist/vis.js"&gt;&lt;...
vis.js节点移动相关教程
04-04
vis.js是一个用于可视化网络、图表和数据的JavaScript库。它提供了许多功能，包括节点移动和位置设置。以下是vis.js节点移动相关的教程。 1. 开始使用vis.js 在开始使用vis.js之前，需要引入vis.js库和vis.css样式文件。可以从vis.js官方网站上下载最新版本的vis.js库和vis.css样式文件，然后将它们添加到HTML页面中。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vis.js Node Move Tutorial</title> <link rel="stylesheet" type="text/css" href="vis.css"> <script type="text/javascript" src="vis.js"></script> </head> <body> <div id="network"></div> <script type="text/javascript"> // your code here </script> </body> </html> ``` 2. 创建一个简单的网络 在vis.js中，可以使用vis.Network对象来创建网络。首先，需要创建一个HTML元素，用于显示网络。然后，可以创建一个vis.Network对象，将其绑定到该HTML元素，并设置节点和边的数据。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vis.js Node Move Tutorial</title> <link rel="stylesheet" type="text/css" href="vis.css"> <script type="text/javascript" src="vis.js"></script> </head> <body> <div id="network"></div> <script type="text/javascript"> // create an array with nodes 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'} ]); // create an array with edges var edges = new vis.DataSet([ {from: 1, to: 2}, {from: 1, to: 3}, {from: 2, to: 4}, {from: 2, to: 5} ]); // create a network var container = document.getElementById('network'); var data = {nodes: nodes, edges: edges}; var options = {}; var network = new vis.Network(container, data, options); </script> </body> </html> ``` 3. 启用节点移动 要启用节点移动，需要在创建vis.Network对象时，将moveable选项设置为true。可以通过options对象来设置该选项。 ```javascript var options = {moveable: true}; var network = new vis.Network(container, data, options); ``` 现在，可以在网络中拖动节点并放置到新的位置。 4. 监听节点移动事件 如果希望在节点移动时执行一些代码，可以监听节点移动事件。可以通过vis.Network对象的on方法来注册事件处理程序。 ```javascript network.on('dragEnd', function(params) { console.log(params.nodes[0] + ' was moved to x:' + params.pointer.canvas.x + ', y:' + params.pointer.canvas.y); }); ``` 上面的代码将在节点移动结束时，将节点ID和新位置的坐标输出到控制台。 5. 限制节点移动范围 有时，希望限制节点移动的范围，以保持网络的视觉效果。可以通过设置节点位置的边界来实现。可以在options对象中设置nodes选项，将其设置为一个对象，该对象包含每个节点的初始位置和位置边界。 ```javascript var options = { moveable: true, nodes: { 1: {x: 100, y: 100, fixed: true, borderWidth: 1, shape: 'circle', color: {background:'red', border:'black'}}, 2: {x: 300, y: 100, borderWidth: 1, shape: 'circle', color: {background:'blue', border:'black'}, physics: false}, 3: {x: 100, y: 300, borderWidth: 1, shape: 'circle', color: {background:'green', border:'black'}, physics: false}, 4: {x: 300, y: 300, borderWidth: 1, shape: 'circle', color: {background:'yellow', border:'black'}, physics: false} } }; ``` 如上所示，节点1的位置已经被固定，而其他节点则没有被固定，并且可以在屏幕上移动。 6. 停用节点移动 要停用节点移动，设置moveable选项为false即可。 ```javascript var options = {moveable: false}; var network = new vis.Network(container, data, options); ``` 现在，节点将无法移动。 以上就是vis.js节点移动相关的教程。通过这些教程，您可以在vis.js中轻松地启用节点移动，监听节点移动事件，限制节点移动范围，并停用节点移动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值