Jtopo introduction simple implementation topology diagram

Time:2021-9-17

In the recent project, we need to draw the topology map, so we studied the components of drawing the topology map. Jtopo is a relatively simple and easy-to-use development kit, which we can share with you.

Jtopo features

1. Developed entirely based on HTML5 canvas, the API is approachable and almost as simple as it can be.
2. It does not depend on any other library and only needs a canvas to execute.
3. Small size, only tens of KB after compression.
5. Free!

Download jtopo

You can download it on the official website http://www.jtopo.com/download/jtopo-0.4.8-min.js , the current version is 0.4.8. There are API documents and cases on the official website.
Jtopo introduction simple implementation topology diagram

Jtopo official website address: http://www.jtopo.com/

jQuery

At present, I am jtopo introduced in Vue project. Jtopo only supports writing in jQuery language. It is necessary to introduce jQuery into the project. If it is not a Vue project, you can download jquery.js on the official website. The introduction of jQuery by Vue can be used for reference https://blog.csdn.net/JQdazhuang/article/details/107152192

Example code

HTML code:

<template>
  <div
    style="position: relative; width: 100%; height: 100%; margin: auto"
    id="topo_content"
  >
    <canvas id="topology-canvas" width="1000" height="600"></canvas>
  </div>
</template>

JS code:

var canvas = document.getElementById("topology-canvas");
        var stage = new JTopo.Stage(canvas);// Create a canvas

        var scene = new JTopo.Scene(stage);// Create a background

        _this.scene = scene;
        var childs = topoData;
        for (let i in childs) {
          var a = childs[i];
          If (a.elementtype = = "node") {// if it is a topology node
            //Node
            var node = new JTopo.Node(a.text);
            node.setLocation(a.x, a.y);
            node.setImage("/static/img/" + a.nodeImage, true);
            node.fontColor = "0,0,0";
            node.nodeId = a.nodeId;
            node.nodeType = a.nodeType;
            node.nodeImage = a.nodeImage;
            node.scaleX = a.scaleX;
            node.scaleY = a.scaleY;
            node.devIp = a.devIp;
            node.textPosition = a.textPosition;
            if (node) {
              node.alarm = a.alarm;
              node.alarmColor = "255,0,0";
              node.alarmAlpha = 0.5;
            }
            scene.add(node);
          } else if (a.elementType == "link") {
            //If it's a connection
            var link = null;
            if (link == null) {
              var nodes = stage.find("node");
              var nodeA, nodeZ;
              if (a.nodeSrc && a.nodeDst) {
                nodes.forEach(function (nodeElement) {
                  if (nodeElement.elementType == "node") {
                    if (nodeElement.nodeId == a.nodeSrc) {
                      nodeA = nodeElement; // starting point
                    }
                    if (nodeElement.nodeId == a.nodeDst) {
                      nodeZ = nodeElement; // End
                    }
                  }
                });
              }

              //Draw polyline
              var c = null;
              if (nodeA && nodeZ) {
                //Polyline and line drawing
                if (a["lineType"] == "line") {
                  c = new JTopo.Link(nodeA, nodeZ);
                  c.lineType = "line";
                }
                if (a["lineType"] == "foldLine") {
                  c = new JTopo.FoldLink(nodeA, nodeZ);
                  c.bundleOffset = 40;
                  c.direction = a.direction;
                  c.lineType = "foldLine";
                }
                if (a["lineType"] == "flexLine") {
                  c = new JTopo.FlexionalLink(nodeA, nodeZ);
                  c.offsetGap = 40;
                  c.direction = a.direction;
                  c.lineType = "flexLine";
                }
                if (a["lineType"] == "curveLine") {
                  c = new JTopo.CurveLink(nodeA, nodeZ);
                  c.lineType = "curveLine";
                }
                c.alpha = 1;
                c.shadow = false;
                c.font = "12px Consolas";
                c.arrowsRadius = 0;
                c.lineWidth = 1.5;
                c.bundleGap = 0;
                c.eagleEyeVsibleDefault = false;

                c.id = a.id;
                c.strokeColor = a.strokeColor;
                c.lineClass = a.lineClass;
                c.nodeSrc = nodeA.nodeId;
                c.nodeDst = nodeZ.nodeId;
                c.localDevId = a.localDevId;
                c.localDevIp = a.localDevIp;
                c.localDevIfindex = a.localDevIfindex;
                c.localDevIfname = a.localDevIfname;
                c.remoteDevId = a.remoteDevId;
                c.remoteDevIp = a.remoteDevIp;
                c.remoteDevIfindex = a.remoteDevIfindex;
                c.remoteDevIfname = a.remoteDevIfname;
                scene.add(c);
              }
            } else {
              link.strokeColor = a.strokeColor;
            }
          }
        }

The code running effect diagram is as follows:

Jtopo introduction simple implementation topology diagram

If you don’t understand, you can leave a message for consultation

See my code cloud for the specific and complete code. You can download and run it yourself https://gitee.com/niexiaohua/JTopo