vis-network实现可拖拽网络拓扑结构图效果代码-html代码-BFW代码库

vis-network实现可拖拽网络拓扑结构图效果代码

代码语言：html

所属分类：图表

代码描述：vis-network实现可拖拽网络拓扑结构图效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

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

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vis-network.min.js"></script>

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

      var DIR = "//repo.bfw.wiki/bfwrepo/images/net/";
      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",
          opacity: 0.7,
        });
        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",
        });
        nodes.push({ id: 22, label: "Normal", opacity: 1 });
        edges.push({ from: 1, to: 2, length: EDGE_LENGTH_MAIN });
        edges.push({ from: 1, to: 3, length: EDGE_LENGTH_MAIN });
        edges.push({ from: 1, to: 22, 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",
            group: "computer",
            opacity: 1,
          });
          edges.push({ from: 2, to: i, length: EDGE_LENG.........完整代码请登录后点击上方下载按钮下载查看