前言
jTopo是一个优秀的Topo展示工具。虽然以j开头,但jTopo事实上不需要依赖于jQuery,则是因为旧的版本依赖于jQuery。
一、入门
jTopo 包括了JTopo.Stage, JTopo.Scene,JTopo.Node和JTopo.Link。
其中Stage是舞台,Scene是场景,Node是结点,Link的链路。
舞台默认显示第一个场景,用户可以用程序来切换场景。
一个最简单的例子,这里只显示两个结点和一条链路
$(function(){ var canvas = document.getElementById('canvas'); var stage = new JTopo.Stage(canvas); var scene = new JTopo.Scene(stage); var nodeA = new JTopo.Node("nodeA"); nodeA.setLocation(3,3); var nodeZ = new JTopo.Node("nodeZ"); nodeA.setLocation(200,200); scene.add(nodeA); scene.add(nodeZ); var link1 = new JTopo.Link(nodeA,nodeZ); var link2 = new JTopo.Link(nodeA,nodeZ); scene.add(link1); scene.add(link2); });
相关推荐
jTopo 入门 简单实例-附件资源
Jtopo入门 Helloword Demo 案例
JTopo源码修改版.js 画拓扑的好工具
Jtopo提示框实现.代码可以直接跑的.
jtopo扩展,各种连线
jtopo_npm
jtopo拖拽出图标并且连线,适用于jtopo.js
jTopo关注于数据的图形展示,它是面向开发人员的,需要进行二次开发。 使用jTopo很简单,可以快速创建一些关系图、拓扑等相关图形化的展示。只要您的数据之间存在有关联关系,都可以使用jTopo来进行人性化、图形化...
jtopo本身的连线比较生硬,刻板,在项目中经常要求“动感”,博主在jtopo0.4.8的基础上通过自主绘制的方式,完美的实现了jtopo连线的脉冲动画效果,还附带了小实例,如果有不解的地方,欢迎大家留言,欢迎来打脸。
jtopo 的官网已经找不到了,资源是网上下来的,Jtopo-0.4.8.js
jTopo 的拓扑结构图画法示例
jtopo拓扑图两节点双线连接bug修复,在源码的基础上进行修改,实现两节点的两条线正常显示。
初学Jtopo时的demo
当jtopo两个节点间有多条连线时,连线的路径会重合,特别是有正反方向的两条连线时,问题尤为严重,附件彻底完美解决了这一问题,如果没有解决,你来打我脸,欢迎大家留言。
jtopo拓扑练习,根据目前开源的拓扑图制作工具,实现简单的拓扑图展示
使用jtopo的一个demo 主要是动态发现节点并排版节点 多节点连动
树型绘制,利用jopo实现拓扑图的绘制(共4级树)
它是HTML5网络托普图工具,版本0.4.8,包含源码以及DEMO