jTopo 拓扑图(入门)

jTopo是我在17年用到过的一款绘制拓扑图的插件,该插件使用yH5 Canvas进行绘制元素以及操作元素,优点在于可实现数据的依赖关系图形化处理,缺点就是使用canvas有时候会出现一些功能难以实现。除此之外,像现在市面上比较流行的Qunee拓扑图插件,如果你的资金准备充足建议使用这款产品,因为该产品的api做的比较详尽,同时ui效果也相比jTopo要好的多,但是如果你想免费使用拓扑图插件的话,jTopo则可以暂时列为你的首选。

废话不多说了,jTopo的官网:http://www.jtopo.com/,下载下最新的js:http://www.jtopo.com/download.html -> jtopo-0.4.8-min.js

官网入门demo1 元素节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #canvas{
                background: red;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="300" height="300"></canvas>
        <script type="text/javascript" src="js/jTopo/jtopo-0.4.8-min.js" ></script>
        <script type="text/javascript">
            var canvas = document.getElementById('canvas'); 
            var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
            var scene = new JTopo.Scene(stage); // 创建一个场景对象
            
            var node = new JTopo.Node("Hello");    // 创建一个节点
            node.setLocation(100,100);    // 设置节点坐标                    
            scene.add(node); // 放入到场景中
        </script>
    </body>
</html>

官网入门demo2 图片节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #canvas{
                background: red;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="300" height="300"></canvas>
        <script type="text/javascript" src="js/jTopo/jtopo-0.4.8-min.js" ></script>
        <script type="text/javascript">
            var canvas = document.getElementById('canvas'); 
            var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
            var scene = new JTopo.Scene(stage); // 创建一个场景对象
            
            var node = new JTopo.Node("Hello");    // 创建一个节点
            node.setLocation(100,100);    // 设置节点坐标                    
            node.rotate = Math.random(); // 旋转角度
            node.scaleX = Math.random(); // 水平方向的缩放
            node.scaleY = Math.random(); // 垂直方向的缩放
            node.alpha = Math.random();  // 透明度
            node.setImage('img/lbxx.jpeg'); // 设置图片
            scene.add(node); // 放入到场景中
        </script>
    </body>
</html>

官方入门demo3 连线

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #canvas{
                background: red;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="300" height="300"></canvas>
        <script type="text/javascript" src="js/jTopo/jtopo-0.4.8-min.js" ></script>
        <script type="text/javascript">
            var canvas = document.getElementById('canvas'); 
            var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
            var scene = new JTopo.Scene(stage); // 创建一个场景对象
            
            var nodeFrom = new JTopo.Node("from");
            nodeFrom.setLocation(50,50);
            scene.add(nodeFrom);
            
            var nodeTo = new JTopo.Node("To");
            nodeTo.setLocation(100,100);
            scene.add(nodeTo);
            
            var link = new JTopo.Link(nodeFrom, nodeTo); // 增加连线
            scene.add(link);
        </script>
    </body>
</html>

 

转载于:https://www.cnblogs.com/xiaohualu/p/10383801.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
双机房流量拓扑图是一种展示双机房流量网络的图形化表示方法。在网络架构中,双机房表示有两个机房,通过一个专线或者公网连接在一起,以实现数据的备份和冗余。而流量拓扑图是指展示网络中数据流动和通信路径的图形化表示方式。 在jtopo中,可以使用其提供的库和工具来绘制双机房流量拓扑图。首先,我们需要确定每个机房的位置和名称,可以使用节点来表示每个机房,并添加相应的标签。然后,我们可以使用连线来表示两个机房之间的连接,并使用连线上的箭头来表示数据流向。通过设置连线的样式和属性,我们可以更好地展现网络连接和数据传输的情况。 除了机房节点和连线之外,我们还可以添加其他图形元素来表示设备、服务器等。这些元素可以用来展示每个机房内部的网络设备、服务器和主机等信息,并通过连线与机房节点连接起来,以展示网络拓扑的完整性和连通性。 最后,我们可以使用jtopo提供的功能和特性来增强双机房流量拓扑图的可视化效果。例如,可以设置节点和连线的样式、颜色和大小,以及添加动画效果和交互功能,提升用户体验。 总之,通过使用jtopo来制作双机房流量拓扑图,可以更加清晰地展示双机房网络架构和数据流动情况,提供给用户更直观的理解和分析资源布局以及流量分布的方式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值