During the project, there was a need to draw a network topology map on a web page, requiring nodes to have interactive functions such as clicking, dragging, and zooming, and to display/hide detailed information, and the data was reported by the device in real time.
To sum up, it is obviously impossible to be lazy when drawing a fixed picture with a tool for drawing topology maps. It is best to find a packaged js library that can be used directly.
JTopo is a data relation + interactive graphics library completely based on HTML5 Canvas. Some topological diagrams can be quickly created. The complete effect of the project cannot be displayed, but the rendering of the demo completed during the self-study process is as follows. I will introduce the entry-level use of the js library and the implementation methods of some functions below.
illustrate
1. This article is only equivalent to a study note, which records the functions and knowledge points I used in the project, and does not cover all the contents of JTopo, such as automatic layout. Sharing it hopes to help people with similar needs complete the task quickly. If you are interested, you can go to the official website for in-depth study.
2. The official website provides a large number of demos, and supports online modification and operation, which is very convenient. The only disadvantage is that some comments are not detailed enough, and you need to keep trying to determine the meaning of certain methods and parameters. My demo is also based on the demo on the official website. I wrote it during my own practice, and the performance is not guaranteed.
1. Tool selection
1. After searching on the Internet, I first found a library called Qunee, which seemed very suitable. However, this library is charged, and individual developers need to sign a non-profit agreement to apply, so they have to give up. Those who are interested can take a look at www.qunee.com on the official website of the district .
2. Then I found another one called D3 (Data-Driven Documents), which is a very good js library for data visualization, and it is free. The only shortcoming is that the degree of freedom is very high, so compared with some out-of-the-box libraries with simple APIs, the difficulty of self-study is slightly higher. Prepare to have time to self-study. The official website is D3.js - Data-Driven Documents .
3. Finally, I found a js library that implements similar functions in the code of the old project of the unit. It is called JTopo. After searching, it is open source and free. After watching the demo, it is very easy to get started, and I decided to choose this tool to realize the function.
2. Preparation
Github链接： GitHub - wuln/jTopo: draw the network topology by javascript
There is a demo on Github , including html, js, css, and pictures, but the time shows that it is 5 years ago. After downloading it, I compared it with the latest document on the official website and found that many methods and keywords are different, and the reference value is not great.
Official website jtopo A useful interactive HTML5 graphics library
Offline JS file download address jtopo update download
3. Getting Started Program
When using, replace the address of the js file with your own address.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jtopo-1.0.4_trial-min.umd.js"></script>
</head>
<body>
<!-- 用于渲染显示的div -->
<div id="divId" style="height:600px; width:600px;">
</div>
<script>
// 频繁用到的对象名字先导入，减少打字数
var Stage = jtopo.Stage;
var Layer = jtopo.Layer;
var Node = jtopo.Node;
var Link = jtopo.Link;
// 根据一个DIV的id创建顶层对象：Stage
// 注：'divId' 需换成你页面实际的div的id或者dom对象
var stage = new Stage('divId');
// 一个Stage下面可以有多个'层',Layer
// 多个Layer可以配合，比如有背景层，有动画层，有交互、展示层等
var layer = new Layer();
// 一般步骤，将Layer放入到‘场景’中
stage.addChild(layer);
// 创建一个节点：new Node('文本', x，y，宽度, 高度)';
// 所有参数都是可选项，也可以稍后赋值
var fromNode = new Node('From', 200, 200, 48, 48);
// 设置图片
fromNode.setImage('imgs/server_icon.png');
// 创建另一个节点
var toNode = new Node('To');
// x,y
toNode.setXY(400, 200);
// 大小
toNode.resizeTo(48, 48);
toNode.setImage('imgs/server_icon.png');
// 连线 new Link('文本',开始节点,结束节点);
var link = new Link('Link', fromNode, toNode);
// 设置样式：粗细
link.setStyles('lineWidth', 2);
// 将节点和连线都加入到Layer中
layer.addChild(fromNode);
layer.addChild(toNode);
layer.addChild(link);
// 按画布居中
stage.translateToCenter();
// 最后一步：显示
stage.show();
</script>
</body>
</html>
The effect diagram of the starter program is shown in the figure. By default, it has a selected highlight effect and the nodes can be dragged and dropped.
4. Introduction of core objects
There is a hierarchy between jtopo 's core objects.
1. Top-level object (Stage)
The top layer is Stage, which manages one or more Layers, and can manage Layers: add and remove. And provide some regular interactive functions, such as: mouse zoom, view mode change (normal, frame selection, drag, edit, lock), center by canvas, export pictures and other functions.
2. Layer object (Layer)
Layer is an abstract object, which is completely transparent by default , and the upper object is Stage. There can be multiple Node and Link objects under a Layer, and the Node and Link objects can only be drawn after being put into the Layer. The frames property of Layer is used to set the drawing frame rate, that is, the number of redraws per second.
Layer can be panned and zoomed, and the user can drag the mouse on the canvas and the mouse wheel to complete it, or modify the x, y coordinates and zoom factors scaleX and scaleY of the Layer through the API to achieve the same effect.
A Layer object corresponds to a Canvas, and multiple Layers are often used for logical layering of the screen. For example, some layers are drawn at a slower speed, some are drawn at a faster speed, some layers are used as background layers, and some are used as animation layers.
It needs to be put into the Stage through the addChild method of the Stage object.
3. Node object (Node)
One of the two core objects of user operation, Node and Link.
Node is a rectangle by default, with coordinates (x, y) and width and height dimensions (width, height).
A text string can be specified, which is displayed below the middle rectangle by default.
The appearance can be set through the setStyles method. The core appearance attributes include: border color, fill color, font color, font (size, bold, etc. supported by CSS Font), and rounded corners.
It needs to be put into the Layer through the addChild method of the Layer object.
4. Connection object (Link)
One of two objects at the core of user operations.
Link is a connection with a starting point and an ending point, and is generally used to represent relationships, flow directions, etc.
A text string can be specified, which is displayed in the middle of the line by default.
The appearance is also set through the setStyles method. The core appearance attributes include: color, line thickness, font color, and font (size, bold, etc. CSS Font support can be used).
Like Node, it needs to be placed in Layer.
5. Text and Positioning
Text positioning is controlled by three core properties: 1. Position 2. Text alignment 3. Text baseline
1. Location
The position of the node text defaults to 'cb'
These are the same keywords used to indicate the position of the line when connecting, plus an additional 'edge'. 'edge' indicates that the line is connected to the edge of the endpoint, and the specific connection point is determined by the relative position of the two endpoints.
2. Text alignment
3. Text Baseline
4. Custom offset
Customize the offset through the textOffsetX and textOffsetY properties.
6. Event handling
It is the same as the event binding and deletion of js, so it will not be introduced here.
Seven, animation effect
1. Position calculation
Node or Link object has a getPoint(t) method, t value range: [0-1], you can get the coordinates of a point on the object.
For Node, a week is 0-1, and for Link, it is 0-1 from the start to the end.
2. Take the moving animation effect as an example
//创建一个小球沿着线移动
var ball = new jtopo.CircleNode(null, 0, 0, 10);
ball.setStyles({
'fillStyle': 'red',
'lineWidth': 2
});
layer.addChild(ball);
//Animation.circle表示一个来回
//前两个参数分别表示起点和终点位置
//第三个参数表示从起点到终点的时间，单位是ms
jtopo.Animation.circle(0, 1, 5000, function(t) {
var p = link3.getPoint(t); //随着时间推移不断获取线上的点
ball.text = '' + t.toFixed(1);
ball.translateCenterTo(p.x, p.y); //将获取的位置赋给小球，达到移动的效果
}).start().repeat(10); //start表示开始动画，repeat表示重复次数
The comments in the above code detail the use of the method and the meaning of the parameters
In the demo shown at the beginning, the flow effect of information and the breathing effect of lines are realized by adding animation to the Link object. The complete code has been uploaded to the website resource, and the link is to draw the network topology map on the web page through JTopo.js-Javascript document resource-CSDN download