vis.js 创建网络拓扑图

最新推荐文章于 2025-06-11 09:19:20 发布

原创最新推荐文章于 2025-06-11 09:19:20 发布 · 1.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

这篇博客通过VisNetwork库展示了如何创建一个包含不同设备（如电脑、打印机、智能手机等）和网络连接的互动网络图。节点以图片形式展示，形象地描绘了网络设备间的连接关系。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>