拓扑图生成器python_HTML5拓扑图编辑器项目 - Graph.Editor
拓扑图编辑器介绍
Graph.Editor是一款基于HTML5技术的拓补图编辑器,采用jquery插件的形式,是Qunee图形组件的扩展项目
数据可视化是一件有趣的工作,冰冷的数据变成美观的图形,如同命令行之于Mac OS X图形界面的,传统的图形组件以图表(Chart)居多,不少优秀的开源或者商业的作品, 比如d3js, echarts, highcharts,而拓扑图、流程图组件相对少一些,知名的有yfiles,本项目则基于Qunee图形组件,是Qunee的扩展项目,旨在为客户提供可供扩展的拓扑图编辑工具, 提供拓扑图展示、编辑、导出、保存等功能,此外本项目也是学习HTML5开发,构建WebAPP项目的参考实例。
注意:本项目内核使用Qunee for HTML5,Qunee本身是一个商业产品,默认仅限本机(localhost)使用,非商业用途可以申请免费授权,商业用途请购买相应授权,官网:qunee.com
在线演示:
入门示例
Hello Graph.Editor
Hello Qunee
$('#editor').graphEditor({callback: function(editor){
var graph = editor.graph;
var hello = graph.createNode("Hello", -100, -50);
hello.image = Q.Graphs.server;
var qunee = graph.createNode("Qunee", 100, 50);
var edge = graph.createEdge("Hello\nQunee", hello, qunee);
graph.moveToCenter();
}});
编辑器的基本示例相比Hello Qunee要复杂些,除了Qunee类库外,还用到了一些第三方组件:jquery,bootstrap, layout.border, 此外就是Graph.Editor自身的类库,这里我们引用在线的js和css
实际代码部分,采用了jquery的写法,如下:
$('#editor').graphEditor({
callback: 回调函数,
data: json数据地址,
images: 拖拽图标信息
})
本例中,通过回调函数获取editor.graph对象,并创建了两个节点和一条连线
更多用法请查看其他demo和代码
运行效果
准备工作
项目用到nodejs,使用bower包管理,用到Gulp相关的插件打包和发布
本项目使用以下工具:
安装nodejs
安装bower - 包管理
安装Gulp - 任务自动管理工具
开始开发环境
切换到项目目录,然后运行下面的命令,完成开发环境的安装
npm install
前端第三方包
用到jquery, bootstrap, layout.border,使用bower下载这些包到bower_components目录
bower install
项目结构
项目主要代码在app目录,其中脚本代码在app/src/内,
app/
--src/
--common/ 编辑器扩展插件
--Exportpane.js 图片导出模块
--JSONSerializer.js 数据序列化模块
--PopupMenu.js 右键菜单模块
--Toolbar.js 工具栏模块
--images/
--graph.editor.js 拓扑图编辑器插件
--graph.editor.css
--scripts/ 示例脚本
--images/ 示例资源
--data/ 示例资源
--index.html 编辑器主页面
--demo.html 编辑器插件示例
dist/ 输出目录
bower_components/ bower第三方包目录,运行bower install 后自动生成
node_modules/ 开发环境相关包目录,运行npm install后自动生成
编译打包
gulp
输出目录结构
dist/
data/
images/
libs/
bootstrap/ 第三方类库bootstrap样式和资源目录
graph.editor/ graph.editor类库
images/
graph.editor.css
graph.editor.js
js.js 第三方类库(jquery, bootstrap, layout.border)
scripts/
styles/
index.html
编辑器主要的类库文件位于libs/graph.editor/, 第三方类库(jquery, bootstrap, layout.border)位于libs/js.js,bootstrap样式和资源目录位于libs/bootstrap/
其他示例
拓扑图生成器python_HTML5拓扑图编辑器项目 - Graph.Editor相关推荐
- Blender笔记:动画曲线编辑器(Graph Editor)技巧
运动曲线可以控制一个动画的流畅度,节奏感和力量感.在Blender中可以通过曲线编辑器来编辑运动曲线. 曲线编辑器(Graph Editor)和动画摄影表的快速切换 使用快捷键Ctrl + Tab可以 ...
- 图形编辑器——Graph Editor(树图必备)
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 使用步骤 前言 图形编辑器--Graph Editor 可以用用来生成树,且可以标记边的权重 告别word.visio ...
- SRPG游戏开发(七)第三章 绘制地图 - 四 初步完善地图编辑器(Map Graph)
返回目录 第三章 绘制地图 四 初步完善地图编辑器(Map Graph) 到目前为止我们可以开心的绘制我们的地图了,但有不少小问题.一直开心忘我的绘制地图,却不知道地图已经绘制了多大,还要 ...
- Unity3D Editor 编辑器扩展3 Editor脚本
Unity3D Editor 编辑器扩展3 Editor脚本 环境:Unity2017.2 语言:C# 总起: 在编辑Unity项目的时候,总不可能避免的接触到Unity自身自带的Inspector参 ...
- 在线代码编辑器:Monaco Editor
monaco editor是微软开源的一款web版代码编辑器.它支持智能提示,代码高亮,代码格式化. Monaco Editor是为VS Code提供支持的代码编辑器,运行在浏览器环境中.编辑器提供代 ...
- 标签编辑新工具:如何使用控制台标签编辑器(Tag editor)
创建阿里云资源时,您可以给资源绑定标签.已经创建的资源,也可以在资源列表页面或者通过API,批量的添加.更改和删除标签.当遇到如下更为复杂问题和场景,该如何快速解决标签问题呢? 资源跨度大,需要跨资源 ...
- 函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用
函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用 文章目录 函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用 1. 为什么要防抖节流 1.1 ...
- hexeditor作用_Hex编辑器Free Hex Editor Neo
Free Hex Editor Neo创建新来帮助你编辑的ASCII,十六进制,十进制,float,double和二进制数据的应用程序. Free Hex Editor Neo 可以查看,修改,分析您 ...
- ye graph editor安装
yE Graph Editor 安装 1. 下载 地址:官网https://www.yworks.com/downloads#yEd 2. 安装 cd 到下载目录; 先用命令: chmod +x 文件 ...
最新文章
- 判断某数组是不是二叉树的后序遍历序列 python递归与非递归解法
- ASP.NET2.0 - skmMenu 的使用
- hibernate mysql 模糊查询_服务器-hibernate操作mysql,模糊查询时中文查不到,数字和英文可以查到...
- 谷歌技术三宝之MapReduce
- C#数“.NET研究”据本地存储方案之SQLite
- 太糟糕了,Java 8没有Iterable.stream()
- 分享几个你可能不知道的交互式Git 命令
- Python IO编程——文件读写
- 7 个不容错过的 VS Code 扩展
- thinkphp 每个页面自定义加载对应指定的js、css
- 自建同步云盘服务器,自建云盘系列——Syncthing (BT Sync的开源替代)
- 安装KeMotion3 03.16d时遇到的问题
- php 简繁体,php实现简体转繁体
- Linux三剑客之SED
- (数据库-MySQL) Date 函数
- OpenCV彩色图像读取
- 单词首字母变大写-vue
- MATLAB中实现图像的空间域滤波和频率域滤波
- C语言——计算阶层求和
- Python-操作excel操作redis
热门文章
- 智能ABC输入法的三个小秘密
- 当当网年中图书大促来了,全年买书最好时机
- HTTPS怎么避免中间人攻击
- 手机型号 无服务器,手机突然无服务是什么原因
- 教师计算机考试ppt,中小学教师计算机高级考试系统.ppt
- splunk中 如何隐藏input_如何隐藏电脑中的私密文件?试试这个加密方法!
- php 支付宝手机端_【php源码】支付宝手机支付接口,有回调可接入自己网站
- Laravel框架中如何使用Service模式?
- 网易smtp 出现 554 DT:SPM,原因在这里
- jacob ppt html,java 使用 jacob 控制 ppt 记录