- React下使用Jtopo(一)
章鱼要回家
网上没有找到react框架下使用Jtopo的例子。走了一些弯路,终于成功运行了一个第一个demo,分享一下。最终效果最初的思路,肯定是要是在JTopo官方下载包,可下载后该如何引用呢?JS的做法是在中直接将包引入,但react由于使用es6语法,是通过import引入各种类库,前提是该类库已经通过npminstall命令下载至项目中。在一切未知的情况下,我搜索了将包发布到npm上的方法,在得知需要
- React中使用jtop(二)
qq_36560180
Reactjtopojtopo-in-node前端实现网络拓扑图ReactEcharts
在上一篇博客中提到了使用jtopo-in-node在React项目中使用jtopo,并画出了一个官网给出的demo。在这之后根据项目需求使用jtopo-in-node实现了拓扑图,在这个过程中遇到了一些问题,现在记录一下解决方案以及未解决的问题。关于node定位的问题,由于不了解jtopo的自动布局,所以我选择了自己计算node的位置。数据更新组件重新渲染的时候画布闪烁的问题。根据需求,需要在图中
- JTopo踩坑记 -- React项目中使用JTopo
qq_36560180
ReactJTopojtopo-in-node拓扑图React
JTopo踩坑记–React项目中使用JTopoJTopo-in-node&JTopo最近实习公司一个项目需要绘制电网的拓扑图,大致要求的效果如下:首先想到的是Echarts和d3,因为这个项目其他图表都是使用的Echarts,但是在Echarts的官方示例以及Gallery中并没有找到类似的示例,并且Echarts的自动布局大多为环形布局,不符合项目需求。所以只能寻找其他的node包。然后就找到
- 最新 vie-vite框架下 jtopo安装使用
Roottt_
前端jtopovite
官方地址官方源码安装下载1.官方好像都没有给git地址,尝试npm安装报错2.找到1.0.5之前的版本npmijtopo2,安装成功后使用报错,应该是版本冲突了1.本地引入,点击官方源码下载,需要jtopo_npm文件2.引入到本地根目录3.vue文件使用import{onMounted}from'vue'import{topoManager}from"./TopoManager";/**初始化*
- jtopo 拓扑图的简单使用
晓_枫
vuevue.jsjavascriptjtopo
官网jtopo一个好用的交互式HTML5图形软件下载jtopo-npm安装包-Javascript文档类资源-CSDN下载引入将jtopo-1.3.8_trial-esm-min.js文件放到assets文件下import引入import{Stage,Layer,Node,Link,FoldLink,Graph,TreeLayout,TipNode,TextNode,AutoFoldLink,Fl
- JS 图片跨域问题
前端的南姐
VUEjavascriptjavascript
使用JS创建图片元素然后在JTopo或three.js中使用时报以上错误,JS代码如下:var_t=this;varhouseImg=newImage();houseImg.crossOrigin='*';houseImg.crossOrigin="Anonymous";houseImg.src=url;houseImg.onload=function(){_t.backgroundNode=ne
- 记一次jquery关系图
lao老麻
用的是jtopo关系图框架varcanvas=document.getElementById('canvas');varstage=newJTopo.Stage(canvas);//创建一个舞台对象varscene=newJTopo.Scene(stage);//创建一个场景对象//stage.mode="drag";/*只可以拖拽,不可拖拉节点/stage.wheelZoom=0.85;/鼠标缩
- 通过JTopo.js在网页绘制网络拓扑图
gxyzlxf
前端用到的工具库javascript
项目中遇到要在网页中绘制网络拓扑图的需求,要求节点具备点击、拖拽、缩放等交互功能,并且可以显示/隐藏详细信息,数据是设备实时上报来的。综上,用画拓扑图的工具画一张固定的图片偷懒显然是不行的,最好是找到一个封装好的js库可以直接使用。JTopo是一款完全基于HTML5Canvas的数据关系+交互式图形库。可以快速创建一些拓扑关系图。项目的完整效果不能展示,自学过程中完成的demo的效果图如下,我将在
- JS绘制拓扑图示例 (JTopo)
baliang9989
javascript前端ViewUI
目前在做的项目是渔政的监控,需要用到的设备包括雷达,光电,站点信息等,想要更直观的展现设备之间的连接关系和状态信息,这时候需要画一张拓扑图在做拓扑图之前,首先要学习一下,html里面另一个比较常用的标签--标签定义图形,通过脚本(通常是JavaScript)来完成,意思即,canvas只是提供一个容器,元素本身是没有绘图能力的,真正形成图形,还是需要通过脚本语言去绘制知道了这个标签的含义及用法之后
- 基于jTopo的拓扑图设计工具库ujtopo
net_yuan
绘制拓扑图有很多开源的工具,知乎上也有人回答了这个问题:https://www.zhihu.com/question/41026400/answer/118726253ujtopo是基于jTopo作了一些封装,适用一些基本的场景jTopo(JavascriptTopologylibrary)是一款完全基于HTML5Canvas的关系、拓扑图形化界面开发工具包。官网地址:http://www.jto
- 二、可视化流程图工具集成
大鱼_f09b
因为主要使用的是vue进行开发,而流程图绘制工具主要也就那么几个,jsplumb、Jtopo这些都是比较成熟的绘制工具了,直接使用的话有点复杂,样式也不是很好看,找了半天找到一个比较简单的,学习下easy-flow学习曲线还算简单,照操作流程一步步执行。1、进入上一章的空白工作空间2、npmi-Svuedraggable3、npmicodemirror--save4、npmi--savelodas
- jTopo如何实现不可拖拽
vue.js
我们在node节点进行拖拽的时候进行监听,使用的是mousedrag事件,然后设置所拖动节点的dragable为falsethis.scene.mousedrag(function(e)){e.target.dragable=false;//将拖拽设置为falsee.target.visible=false;//将节点设置为不可见}如果不懂this.scene结构的可以参考我的另一篇简单入门的to
- jTopo入门 简单实现拓扑图
大菜牙铝式
vue.js前端jquery
最近项目中需要绘制拓扑图,于是研究了下绘制拓扑图的组件,jtopo是一款比较简单易上手的开发工具包,分享给大家。jtopo特点1、完全基于HTML5Canvas开发,API平易近人、几乎简单到了极致。2、不依赖任何其他库、执行仅需一个Canvas。3、体积小,压缩后仅几十KB。5、免费!下载jtopo大家可以去官网自行下载http://www.jtopo.com/download/jtopo-0.
- jtopo插件(修改源码)修复两节点双线连接的bug
魏亚强
前端
首先看效果如果直接使用jtopo4.8.js源码的话,会出现双向的连线重叠的现象。于是我修改了源码,修改了连线部分的路径代码,demo的地址https://download.csdn.net/download/wyq188945/11958405功能完善,欢迎下载。
- jTopo——js库
weixin_33681778
学习地址:http://www.jtopo.com/demo/statictis.html转载于:https://www.cnblogs.com/WEI-web/p/7382586.html
- jtopo 折叠与展开子节点
_let
jtopojtopo
jtopo折叠与展开子节点如果是只想简单的折叠和展开拓扑图的所有子节点,不对子节点的折叠状态做记录的话很简单。通过去递归遍历所有子节点,然后设置节点的显示属性visible就可以了。如果需要记录子节点的折叠状态,我们可以通过一个对象来记录状态,下面是简单的实现:varfoldOpenStatus={};//记录折叠状态functionfoldOpen(e){//折叠展开varthisNode=e.
- jtopo js插件绘制网络拓扑图
追风哥哥
网络拓扑jtopocanvas
一、实现的功能1、拓扑的基本绘制2、拓扑放射性布局3、多级拓扑的实现4、下级拓扑节点的隐藏与展现5、导出拓扑图二、效果图展示正常展示:节点收缩展示:三、引入库(稍作可以直接复用)1、引入jQuery,jquery.js2、引入jtopo插件jtopo-0.4.8.js3、支持IE8,excanvas.js四、前端代码在实现节点隐藏于展示过程中,实现方法可能不够好,问题如下:1、而且使用全局数组(用
- jtopo简单实例
laputa73
web编程javascript
原贴地址http://cn-arthurs.iteye.com/blog/2009345说明:jtopo是一个基于canvas的js拓扑图形组件.比canvasexpress容易多了.可以方便地加点,加连线,加鼠标事件,拖曳.号称跨浏览器,不过实际上不支持ie678,加上excanvas.js也没用,除非像canvasexpress那样使用chrome插件.注意在IE9下,第一行的必不可少网络拓扑
- JTopo + Vue 实现自定义拖拽流程图
WULIhuihui
vue组件HTML5css拖拽流程图vue.jsjqueryjavascripthtml5游戏引擎
JTopo+Vue实现自定义拖拽流程图市场上做流程图的插件比较多,这里介绍一种基于canvas编写的js插件,结合vue框架做出精美的流程图首先搭建vue框架,这里就不做介绍,由于jtopo官方demo里用到了jquery,所以我的项目里也引用了jquery插件,鉴于这里用到了很多的dom操作,所以建议大家也直接引用jquery进行操作;然后将jtopo.js下载到本地,放到自己的vue项目的静态
- jtopo树结构方法积累
abc96998
1、计算最外层最大节点个数:functiongetMaxLeafCnt(data){varmaxcnt=0;//本身varchildren=data.children==undefined?newArray():data.children;if(children.length>0){for(vari=0;i
- jtopo 实现调用saveImageInfo()方法直接下载图片
_let
jtopo
首先找到源代码里的saveImageInfo方法this.saveImageInfo=function(a,b){varc=this.eagleEye.getImage(a,b),d=window.open("about:blank");returnd.document.write(""),this},把以下代码复制替换掉上面代码:this.saveImageInfo=function(a,b){
- 【前端学习】JTopo入门--01实现Node搜索功能
高冷的宅先生
前端学习
0.实验目的最近看了很多项目的前端,都带有数据可视化,因此想要实际体验一下自己写一个很久没记录学习,也是因为一直在看这个,大概2周多,完整项目太大了,就暂时先记录一个功能前后端还是区别比较大?感觉写起调用来很乱由于没有什么前端编写的经验,实在是比较坎坷先看了一下YouTube的视频课,直接看的JS部分(https://www.youtube.com/playlist?list=PLoYCgNOIy
- 前端开发框架总结之利用Jtopo实现网络拓扑功能(一)
wiki_Wei
前端技术
前端开发框架总结之利用Jtopo实现网络拓扑功能(一)前言:前段时间由于项目需要实现一个网络设备拓扑管理的功能,经过一番比较,最终选择了利用JTopo插件来实现相关功能。首先JTopo是免费的,其次官网上的一些拓扑示例还算比较全面,能覆盖大部分拓扑场景,再次个人认为JTopo从功能定位和API设计及实现来讲还是很清晰且简洁的,比较容易理解和上手使用。基于这三点原因加入了JTopo的二次开发大军。在
- Jtopo 拓扑图
tengmuxin
jtopo拓扑图前端
在网上找了很久的拓扑图展示,发现了很多优秀的作品,但是大都收费,只有这个Jtopo及免费也还不错但是效果有点简单,比如要实现两折并且节点固定在一点的话(如图war右边的小节点),就得在节点处定义一个节点类了,并且拖动war节点,小蓝节点也得跟着动,效果还不错。文字不能换行,好歹没用到类似功能。但是文字节点貌似有点偏下,还没办法解决。求解答……贴自己做的实例的图,可以去下载看下,免费。官方demo实
- 数据可视化资料汇总
weixin_33910434
javascriptpython
2019独角兽企业重金招聘Python工程师标准>>>###1.说说数据可视化技术四大派系###2.ECharts###3.G2(TheGrammarOfGraphics)是一个由纯JavaScript编写、强大的语义化图表生成工具###4.jTopo(JavascriptTopologylibrary)###5.10款面向HTML5画布(Canvas)的JavaScript库###6.ichar
- 开源javascript拓扑工具集合
donghe587
开源拓扑工具集合
文章转自鲸鱼啊:https://www.jingyua.com最近项目上又个需求,需要用到拓扑工具,原来没有接触过这块内容,就去网上找了一些开源js拓扑工具,这里我做了一下总结,分享给大家。需求拓扑图1.jtopo拓扑图形化界面开发工具包jTopo项目实例jTopo(JavascriptTopologylibrary)是一款完全基于HTML5Canvas的关系、拓扑图形化界面开发工具包。jTopo
- 网络拓扑图js插件——jTopo应用
懒人笔记—001
JavaScript
jTopo官网:http://www.jtopo.com/1、特点:基于HTML5Canvas,不依赖其他库2、应用:效果:源码github地址在HTML页面中引入jtopo.min.js文件,添加一个canvas:绘制拓扑图顺时针旋转逆时针旋转放大缩小节点详情编辑节点删除该节点删除该连线根据自身需求,控制节点、连线等的样式;给节点、连线添加右键菜单;可以通过添加鼠标事件实现拖拽组件绘制拓扑图;节
- FocusTopo说明文档
罗不错
focusTopo代码文件介绍插件主要由三个js文件构成:源码文件:jtopo-0.4.8.js封装代码文件:topo-main.js基于源码进行的封装(下文主要针对topo-main.js里面的接口进行介绍)业务代码文件:topo-focus.js调用封装代码文件暴露的接口其中封装代码由以下几个模块构成:状态管理者用于存放全局状态,比如选中一个节点,右侧滑出弹窗,弹窗展现节点的属性,stateM
- jTopo HTML5 Canvas 画图组件
sunyuliang
jTopo是什么?jTopo(JavascriptTopologylibrary)是一款完全基于HTML5Canvas的关系、拓扑图形化界面开发工具包。jTopo关注于数据的图形展示,它是面向开发人员的,需要进行二次开发。使用jTopo很简单,可以快速创建一些关系图、拓扑等相关图形化的展示。只要您的数据之间存在有关联关系,都可以使用jTopo来进行人性化、图形化的展示。jTopo的目标:1.简单好
- jTopo HTML5 Canvas 画图组件
sunyuliang
jTopo是什么?jTopo(JavascriptTopologylibrary)是一款完全基于HTML5Canvas的关系、拓扑图形化界面开发工具包。jTopo关注于数据的图形展示,它是面向开发人员的,需要进行二次开发。使用jTopo很简单,可以快速创建一些关系图、拓扑等相关图形化的展示。只要您的数据之间存在有关联关系,都可以使用jTopo来进行人性化、图形化的展示。jTopo的目标:1.简单好
- ASM系列四 利用Method 组件动态注入方法逻辑
lijingyao8206
字节码技术jvmAOP动态代理ASM
这篇继续结合例子来深入了解下Method组件动态变更方法字节码的实现。通过前面一篇,知道ClassVisitor 的visitMethod()方法可以返回一个MethodVisitor的实例。那么我们也基本可以知道,同ClassVisitor改变类成员一样,MethodVIsistor如果需要改变方法成员,注入逻辑,也可以
- java编程思想 --内部类
百合不是茶
java内部类匿名内部类
内部类;了解外部类 并能与之通信 内部类写出来的代码更加整洁与优雅
1,内部类的创建 内部类是创建在类中的
package com.wj.InsideClass;
/*
* 内部类的创建
*/
public class CreateInsideClass {
public CreateInsideClass(
- web.xml报错
crabdave
web.xml
web.xml报错
The content of element type "web-app" must match "(icon?,display-
name?,description?,distributable?,context-param*,filter*,filter-mapping*,listener*,servlet*,s
- 泛型类的自定义
麦田的设计者
javaandroid泛型
为什么要定义泛型类,当类中要操作的引用数据类型不确定的时候。
采用泛型类,完成扩展。
例如有一个学生类
Student{
Student(){
System.out.println("I'm a student.....");
}
}
有一个老师类
- CSS清除浮动的4中方法
IT独行者
JavaScriptUIcss
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近。CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受。
1、结尾处加空div标签 clear:both 1 2 3 4
.div
1
{
background
:
#000080
;
border
:
1px
s
- Cygwin使用windows的jdk 配置方法
_wy_
jdkwindowscygwin
1.[vim /etc/profile]
JAVA_HOME="/cgydrive/d/Java/jdk1.6.0_43" (windows下jdk路径为D:\Java\jdk1.6.0_43)
PATH="$JAVA_HOME/bin:${PATH}"
CLAS
- linux下安装maven
无量
mavenlinux安装
Linux下安装maven(转) 1.首先到Maven官网
下载安装文件,目前最新版本为3.0.3,下载文件为
apache-maven-3.0.3-bin.tar.gz,下载可以使用wget命令;
2.进入下载文件夹,找到下载的文件,运行如下命令解压
tar -xvf apache-maven-2.2.1-bin.tar.gz
解压后的文件夹
- tomcat的https 配置,syslog-ng配置
aichenglong
tomcathttp跳转到httpssyslong-ng配置syslog配置
1) tomcat配置https,以及http自动跳转到https的配置
1)TOMCAT_HOME目录下生成密钥(keytool是jdk中的命令)
keytool -genkey -alias tomcat -keyalg RSA -keypass changeit -storepass changeit
- 关于领号活动总结
alafqq
活动
关于某彩票活动的总结
具体需求,每个用户进活动页面,领取一个号码,1000中的一个;
活动要求
1,随机性,一定要有随机性;
2,最少中奖概率,如果注数为3200注,则最多中4注
3,效率问题,(不能每个人来都产生一个随机数,这样效率不高);
4,支持断电(仍然从下一个开始),重启服务;(存数据库有点大材小用,因此不能存放在数据库)
解决方案
1,事先产生随机数1000个,并打
- java数据结构 冒泡排序的遍历与排序
百合不是茶
java
java的冒泡排序是一种简单的排序规则
冒泡排序的原理:
比较两个相邻的数,首先将最大的排在第一个,第二次比较第二个 ,此后一样;
针对所有的元素重复以上的步骤,除了最后一个
例题;将int array[]
- JS检查输入框输入的是否是数字的一种校验方法
bijian1013
js
如下是JS检查输入框输入的是否是数字的一种校验方法:
<form method=post target="_blank">
数字:<input type="text" name=num onkeypress="checkNum(this.form)"><br>
</form>
- Test注解的两个属性:expected和timeout
bijian1013
javaJUnitexpectedtimeout
JUnit4:Test文档中的解释:
The Test annotation supports two optional parameters.
The first, expected, declares that a test method should throw an exception.
If it doesn't throw an exception or if it
- [Gson二]继承关系的POJO的反序列化
bit1129
POJO
父类
package inheritance.test2;
import java.util.Map;
public class Model {
private String field1;
private String field2;
private Map<String, String> infoMap
- 【Spark八十四】Spark零碎知识点记录
bit1129
spark
1. ShuffleMapTask的shuffle数据在什么地方记录到MapOutputTracker中的
ShuffleMapTask的runTask方法负责写数据到shuffle map文件中。当任务执行完成成功,DAGScheduler会收到通知,在DAGScheduler的handleTaskCompletion方法中完成记录到MapOutputTracker中
- WAS各种脚本作用大全
ronin47
WAS 脚本
http://www.ibm.com/developerworks/cn/websphere/library/samples/SampleScripts.html
无意中,在WAS官网上发现的各种脚本作用,感觉很有作用,先与各位分享一下
获取下载
这些示例 jacl 和 Jython 脚本可用于在 WebSphere Application Server 的不同版本中自
- java-12.求 1+2+3+..n不能使用乘除法、 for 、 while 、 if 、 else 、 switch 、 case 等关键字以及条件判断语句
bylijinnan
switch
借鉴网上的思路,用java实现:
public class NoIfWhile {
/**
* @param args
*
* find x=1+2+3+....n
*/
public static void main(String[] args) {
int n=10;
int re=find(n);
System.o
- Netty源码学习-ObjectEncoder和ObjectDecoder
bylijinnan
javanetty
Netty中传递对象的思路很直观:
Netty中数据的传递是基于ChannelBuffer(也就是byte[]);
那把对象序列化为字节流,就可以在Netty中传递对象了
相应的从ChannelBuffer恢复对象,就是反序列化的过程
Netty已经封装好ObjectEncoder和ObjectDecoder
先看ObjectEncoder
ObjectEncoder是往外发送
- spring 定时任务中cronExpression表达式含义
chicony
cronExpression
一个cron表达式有6个必选的元素和一个可选的元素,各个元素之间是以空格分隔的,从左至右,这些元素的含义如下表所示:
代表含义 是否必须 允许的取值范围 &nb
- Nutz配置Jndi
ctrain
JNDI
1、使用JNDI获取指定资源:
var ioc = {
dao : {
type :"org.nutz.dao.impl.NutDao",
args : [ {jndi :"jdbc/dataSource"} ]
}
}
以上方法,仅需要在容器中配置好数据源,注入到NutDao即可.
- 解决 /bin/sh^M: bad interpreter: No such file or directory
daizj
shell
在Linux中执行.sh脚本,异常/bin/sh^M: bad interpreter: No such file or directory。
分析:这是不同系统编码格式引起的:在windows系统中编辑的.sh文件可能有不可见字符,所以在Linux系统下执行会报以上异常信息。
解决:
1)在windows下转换:
利用一些编辑器如UltraEdit或EditPlus等工具
- [转]for 循环为何可恨?
dcj3sjt126com
程序员读书
Java的闭包(Closure)特征最近成为了一个热门话题。 一些精英正在起草一份议案,要在Java将来的版本中加入闭包特征。 然而,提议中的闭包语法以及语言上的这种扩充受到了众多Java程序员的猛烈抨击。
不久前,出版过数十本编程书籍的大作家Elliotte Rusty Harold发表了对Java中闭包的价值的质疑。 尤其是他问道“for 循环为何可恨?”[http://ju
- Android实用小技巧
dcj3sjt126com
android
1、去掉所有Activity界面的标题栏
修改AndroidManifest.xml 在application 标签中添加android:theme="@android:style/Theme.NoTitleBar"
2、去掉所有Activity界面的TitleBar 和StatusBar
修改AndroidManifes
- Oracle 复习笔记之序列
eksliang
Oracle 序列sequenceOracle sequence
转载请出自出处:http://eksliang.iteye.com/blog/2098859
1.序列的作用
序列是用于生成唯一、连续序号的对象
一般用序列来充当数据库表的主键值
2.创建序列语法如下:
create sequence s_emp
start with 1 --开始值
increment by 1 --増长值
maxval
- 有“品”的程序员
gongmeitao
工作
完美程序员的10种品质
完美程序员的每种品质都有一个范围,这个范围取决于具体的问题和背景。没有能解决所有问题的
完美程序员(至少在我们这个星球上),并且对于特定问题,完美程序员应该具有以下品质:
1. 才智非凡- 能够理解问题、能够用清晰可读的代码翻译并表达想法、善于分析并且逻辑思维能力强
(范围:用简单方式解决复杂问题)
- 使用KeleyiSQLHelper类进行分页查询
hvt
sql.netC#asp.nethovertree
本文适用于sql server单主键表或者视图进行分页查询,支持多字段排序。KeleyiSQLHelper类的最新代码请到http://hovertree.codeplex.com/SourceControl/latest下载整个解决方案源代码查看。或者直接在线查看类的代码:http://hovertree.codeplex.com/SourceControl/latest#HoverTree.D
- SVG 教程 (三)圆形,椭圆,直线
天梯梦
svg
SVG <circle> SVG 圆形 - <circle>
<circle> 标签可用来创建一个圆:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" c
- 链表栈
luyulong
java数据结构
public class Node {
private Object object;
private Node next;
public Node() {
this.next = null;
this.object = null;
}
public Object getObject() {
return object;
}
public
- 基础数据结构和算法十:2-3 search tree
sunwinner
Algorithm2-3 search tree
Binary search tree works well for a wide variety of applications, but they have poor worst-case performance. Now we introduce a type of binary search tree where costs are guaranteed to be loga
- spring配置定时任务
stunizhengjia
springtimer
最近因工作的需要,用到了spring的定时任务的功能,觉得spring还是很智能化的,只需要配置一下配置文件就可以了,在此记录一下,以便以后用到:
//------------------------定时任务调用的方法------------------------------
/**
* 存储过程定时器
*/
publi
- ITeye 8月技术图书有奖试读获奖名单公布
ITeye管理员
活动
ITeye携手博文视点举办的8月技术图书有奖试读活动已圆满结束,非常感谢广大用户对本次活动的关注与参与。
8月试读活动回顾:
http://webmaster.iteye.com/blog/2102830
本次技术图书试读活动的优秀奖获奖名单及相应作品如下(优秀文章有很多,但名额有限,没获奖并不代表不优秀):
《跨终端Web》
gleams:http