JTopo 使用
1. 下载JTopo js http://www.jtopo.com/download.html
2. 引入js文件,引入jtopo之前引入jQuery
3. JTopo Demo -- 圆形布局
步骤: 获取canvas ——> 创建stage ——> 创建scene添加的stage ——> 创建节点添加到scene
$(document).ready(function(){
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas);
//显示工具栏
showJTopoToobar(stage);
var scene = new JTopo.Scene();
stage.add(scene);
scene.background = './img/bg.jpg'; var cloudNode = new JTopo.Node('root');
cloudNode.setSize(30, 26);
cloudNode.setLocation(360,230);
cloudNode.layout = {type: 'circle', radius: 150}; scene.add(cloudNode); for(var i=1; i<4; i++){
var node = new JTopo.CircleNode('host' + i);
node.fillStyle = '200,255,0';
node.radius = 15;
node.setLocation(scene.width * Math.random(), scene.height * Math.random());
node.layout = {type: 'circle', radius: 80}; scene.add(node);
var link = new JTopo.Link(cloudNode, node);
scene.add(link); for(var j=0; j<6; j++){
var vmNode = new JTopo.CircleNode('vm-' + i + '-' + j);
vmNode.radius = 10;
vmNode.fillStyle = '255,255,0';
vmNode.setLocation(scene.width * Math.random(), scene.height * Math.random());
scene.add(vmNode);
scene.add(new JTopo.Link(node, vmNode));
}
}
JTopo.layout.layoutNode(scene, cloudNode, true); scene.addEventListener('mouseup', function(e){
if(e.target && e.target.layout){
JTopo.layout.layoutNode(scene, e.target, true);
}
});
});
4. 总结的问题:
1. 关于node的layout,目前我知道有 tree,circle 两种,用法如下:
node.layout = {type: 'tree', direction: direction, width: 180, height: 80};
2. 关于container,也就是分组容器。container需要添加到scene中,container中添加node,需要将node添加到container以及scene中。例子如下:
var stage;
$(document).ready(function(){
var canvas = document.getElementById('canvas');
stage = new JTopo.Stage(canvas);
//显示工具栏
showJTopoToobar(stage);
var scene = new JTopo.Scene();
scene.background = './img/bg.jpg';
stage.add(scene); // 不指定布局的时候,容器的布局为自动(容器边界随元素变化)
var container = new JTopo.Container('边界自动变化');
container.textPosition = 'Middle_Center';
container.fontColor = '100,255,0';
container.font = '18pt 微软雅黑';
container.borderColor = '255,0,0';
container.borderRadius = 30; // 圆角
scene.add(container); for(var i=0; i<5; i++){
var node = new JTopo.Node("A_"+i);
node.textPosition = "Middle_Center";
node.setLocation(300+ Math.random() * 300, 200+ Math.random() * 200);
scene.add(node);
container.add(node);
}
scene.add(new JTopo.Link(container.childs[0], container.childs[1]));
scene.add(new JTopo.Link(container.childs[2], container.childs[3])); // 流式布局(水平、垂直间隔均为10)
var flowLayout = JTopo.layout.FlowLayout(10, 10); // 网格布局(4行3列)
var gridLayout = JTopo.layout.GridLayout(4, 3); var container2 = new JTopo.Container('点击切换布局');
container2.layout = flowLayout;
container2.fillColor = '10,10,100';
container2.setBound(10, 10, 300, 200);
scene.add(container2); for(var i=0; i<12; i++){
var node = new JTopo.Node("F_" + i);
node.textPosition = "Middle_Center";
scene.add(node);
container2.add(node);
} container2.click(function(){
if(container2.layout === flowLayout){
container2.layout = gridLayout;
}else{
container2.layout = flowLayout;
}
});
});
3.关于link的样式:
简单连线 | Link |
折线 | FoldLink |
二次折线 | FlexionalLink |
曲线 | CurveLink |
还在探索中,持续更新。。。
❤ 自定义绘制带有告警的节点:
container容器是个非常好用的东西。我们需要绘制 1个container + 2个节点
JTopo 使用的更多相关文章
- JS绘制拓扑图示例 (JTopo)
目前在做的项目是渔政的监控,需要用到的设备包括雷达,光电,站点信息等,想要更直观的展现设备之间的连接关系和状态信息,这时候需要画一张拓扑图 在做拓扑图之前,首先要学习一下,html里面另一个比较常用的 ...
- JTopo使用心得
因为工作关系,最近用到了拓扑图,找了一溜工具后,发现了这个--JTopo,纯国产而且免费 当然了如果你英文水平足够好的话.也可以看看这些英文的做拓扑图的工具,以下网站出自知乎回答:开源HTML5 绘图 ...
- 基于jTopo的拓扑图设计工具库ujtopo
绘制拓扑图有很多开源的工具,知乎上也有人回答了这个问题: https://www.zhihu.com/question/41026400/answer/118726253 ujtopo是基于jTopo ...
- 5-15 笔记 jtopo使用
Jtopo的核心对象有6个,分别是Stage(舞台对象),Scene(场景对象),Node(节点对象),Link(连线对象),Container(容器对象),Effect.Animate(动画效果) ...
- 网络拓扑图js插件——jTopo应用
jTopo官网:http://www.jtopo.com/ 1.特点: 基于HTML5 Canvas,不依赖其他库 2.应用: 效果: 源码github地址 在HTML页面中引入jtopo.min.j ...
- 如何在Vue-cli项目中使用JTopo
1.前言 jTopo(Javascript Topology library)是一款完全基于HTML5 Canvas的关系.拓扑图形化界面开发工具包.其体积小,性能优异,由一群开发爱好者来维护.唯一感 ...
- jTopo HTML5 Canvas 画图组件
jTopo是什么? jTopo(Javascript Topology library)是一款完全基于HTML5 Canvas的关系.拓扑图形化界面开发工具包. jTopo关注于数据的图形展示,它是面 ...
- jTopo介绍(一)
jTopo(Javascript Topology library)是一款完全基于HTML5 Canvas的关系.拓扑图形化界面开发工具包.jTopo关注于数据的图形展示,它是面向开发人员的,需要进行 ...
- vue 集成jTopo 处理方法
jTopo 帮助说明网站 http://www.jtopo.com/index.html 使用例子: http://www.jtopo.com/demo/helloworld.html 不建议直接安装 ...
随机推荐
- neo4j图数据库入门
一.安装及启动 1.安装 Java SDK 1) 地址:http://www.oracle.com/technetwork/java/javase/downloads 2) 下载:jd ...
- Qt Creator 预览QtCreator中的界面
当在QtCreator界面编辑器中放置好布局和控件之后,组合键 Alt + Shift + R 可以实现预览功能. 也可以通过以下方式更改快捷键: 具体路径 ...
- Win CE 5.0 增加电池电量显示
摘自 http://blog.csdn.net/li0531/article/details/8818243 同时只在右上角显示一个 Label 控件,因此代码量精简了很多. [DllImport(& ...
- 关于java.lang.IncompatibleClassChangeError: Implementing class错误解决
在javaagent使用asm字节码编程的时候启动异常,java.lang.IncompatibleClassChangeError: Implementing class, 这是包冲突引起的问题,加 ...
- xsl如何实现递归复制?
<xsl:template match="*" mode="addSeatSelectionToAirProduct"> <xsl:eleme ...
- hive的查询注意事项以及优化总结 .
Hive是将符合SQL语法的字符串解析生成可以在Hadoop上执行的MapReduce的工具.使用Hive尽量按照分布式计算的一些特点来设计sql,和传统关系型数据库有区别, 所以需要去掉原有关系型数 ...
- css图片变色变暗变亮
本文章向码农介绍css 图片变色变暗变亮 实例代码如下: <style> *{margin:0;padding:0;list-style:none;} img{border:1px sol ...
- NHibernate.Cfg.HibernateConfigException
在用NHibernate 框架做web 项目时,当项目被成功编译后,按F5 启动调试时,一开始就出现这个错误,刚开始就很郁闷,到底出在哪里?连自己都 不知道,在网上搜来搜去,找了很多的资料终于弄明白了 ...
- PCB的初次窥探
第一次画PCB经常用到的知识点 鼠标拖动+X :左右转动(对称) +space:90度转动 +L :顶层与底层的切换 Ctrl+M:测量 J + C:查找原件 交叉探针+原理图(P ...
- tensorflow读取数据
线程和队列 在使用TensorFlow进行异步计算时,队列是一种强大的机制. 为了感受一下队列,让我们来看一个简单的例子.我们先创建一个“先入先出”的队列(FIFOQueue),并将其内部所有元素初始 ...