[原]JointJS流程图
最近项目上需要用流程图来做问题定界分析，之前有同事用jsPlumb做过，但是阅读代码后觉得比较麻烦，所以自己又找了一圈，找到一个叫Dagre-D3的开源类库，画出来的效果如下图，Dagre-D3最大的优点就是可以实现自动布局，你只需要put数据就可以了，但是缺点就是自动布局后的连线会比较乱，而且连线不是横平竖直的，对于流程图不复杂的还好，稍微复杂点画出来的连线就没法看。最后还是被pass了。
jsPlumb地址：https://jsplumbtoolkit.com
Dagre-D3 Git地址：https://github.com/cpettitt/dagre-d3
后面经过一番百度，最终决定用JointJS，官网：www.jointjs.com，相比Dagre-D3和jsPlumb，JointJS的API很详细，代码量少，连接线有多种选择，封装了多种常用的形状，而且能画的图很多，官方也给了一些demo可以参考。下面是我用JointJS画出来的流程图：
依赖：在官网的下载页面都能找到
<link rel="stylesheet" type="text/css" href="joint.css" />
<script src="jquery.min.js"></script>
<script src="lodash.min.js"></script>
<script src="backbone-min.js"></script>
<script src="joint.js"></script>
我的demo里还引用了bootstrap的依赖用来显示模态框
html代码
<body>
<div id="paper" class="paper"></div> <div class="modal fade searchpanel" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modalTitle">详细信息</h4>
</div>
<div class="modal-body"> </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
</body>
js代码
首先是定义画板和画布，这里重写了ElementView和LinkView，目的是为了让画出来的流程图不能被删除和编辑
var graph = new joint.dia.Graph();
var ElementView = joint.dia.ElementView.extend({
pointerdown: function () {
this._click = true;
joint.dia.ElementView.prototype.pointerdown.apply(this, arguments);
},
pointermove: function(evt, x, y) {
this._click = false;
joint.dia.ElementView.prototype.pointermove.apply(this, arguments);
},
pointerup: function (evt, x, y) {
if (this._click) {
// triggers an event on the paper and the element itself
this.notify('cell:click', evt, x, y);
} else {
joint.dia.ElementView.prototype.pointerup.apply(this, arguments);
}
}
});
var LinkView = joint.dia.LinkView.extend({
addVertex: function(evt, x, y) {},
removeVertex: function(endType) {},
pointerdown:function(evt, x, y) {}
});
//定义画布
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 1200,
height: 600,
gridSize: 1,
model: graph,
elementView: ElementView,
linkView:LinkView
});
//paper.$el.css('pointer-events', 'none')//去除默认样式，使所有事件不可用
然后我写了两个函数分别用来创建形状和连线，这样写可以减少代码量，官方的demo也大都是这样写的
//定义形状
var state = function(x, y, shape, background, text){
var cell;
if(shape==="rect"){
cell = new joint.shapes.basic.Rect({
position: { x: x, y: y },//坐标
size: { width: 140, height: 40 },//宽高
attrs: {
rect: {
fill: {
type: 'linearGradient',
stops: [
{ offset: '0%', color: background },//渐变开始
{ offset: '100%', color: '#fe8550' }//渐变结束
],
attrs: { x1: '0%', y1: '0%', x2: '0%', y2: '100%' }
},
stroke: background,//边框颜色
'stroke-width': 1//边框大小
},
text: { text: text } //显示文字
}
});
} else if(shape==="ellipse"){
cell = new joint.shapes.basic.Ellipse({
position: { x: x, y: y },//坐标
size: { width: 140, height: 40 },//宽高
attrs: {
ellipse: {
fill: {
type: 'linearGradient',
stops: [
{ offset: '0%', color: background },//渐变开始
{ offset: '100%', color: '#FFFFFF' }//渐变结束
],
attrs: { x1: '0%', y1: '0%', x2: '0%', y2: '100%' }
},
stroke: background,//边框颜色
'stroke-width': 1//边框大小
},
text: { text: text } //显示文字
}
});
}
graph.addCell(cell);
return cell;
}; //定义连线
function link(source, target, label){
var cell = new joint.dia.Link({
source: { id: source.id },
target: { id: target.id },
labels: [{ position: 0.5, attrs: { text: { text: label || '', 'font-weight': 'bold' } } }],
router: { name: 'manhattan' },//设置连线弯曲样式 manhattan直角
attrs: {
'.connection': {
stroke: '#333333',//连线颜色
'stroke-width': 2//连线粗细
},
'.marker-target': {
fill: '#333333',//箭头颜色
d: 'M 10 0 L 0 5 L 10 10 z'//箭头样式
}
}
});
graph.addCell(cell);
return cell;
}
最后就是我们实际的业务代码了，这里我们可以整理一下数据结构，把数据定义成json格式，然后写一个函数通过json直接生成流程图，当然坐标需要寻找规律自己计算一下
//创建元素
var start = state(500,100,"ellipse","#00FFFF", "视频播放成功率");
var state1 = state(500,200,"rect","#f7a07b", "GET响应成功率");
var state2 = state(400,300,"rect","#f7a07b", "HTTP错误码分析");
var state3 = state(600,300,"rect","#f7a07b", joint.util.breakText("TCP异常和其他原因",{width:80}));
var state4 = state(400,400,"rect","#f7a07b", "4XX、5XX分析");
var state5 = state(600,400,"rect","#f7a07b", "接口以上分析");
var state6 = state(750,400,"rect","#f7a07b", "接口以下分析"); //创建连线
link(start, state1, "");
link(state1, state2, "≥70%");
link(state1, state3, "<70%");
link(state2, state4, "");
link(state3, state5, "是");
link(state3, state6, "否"); //给所有元素添加点击事件
paper.on('cell:click', function (e) {
$("#detailModal .modal-body").html("");
var arr = $("#"+e.id+" tspan");
if(arr.length===1){
$("#detailModal .modal-body").append($(arr).html());
$("#detailModal").modal();
} else{
var tmp="";
$.each(arr, function(k,v){
tmp+=$(v).html();
});
$("#detailModal .modal-body").append(tmp);
$("#detailModal").modal();
} });
后面是给每个元素（不包含连线）添加了一个点击事件，弹出一个模态框，显示当前点击的内容。
[原]JointJS流程图的更多相关文章
- JointJS绘制流程图
摘要: JointJS是一个javascript图表库.你可以使用它制作静态或者动态的图表.关系表.流程图. 效果图:
- 【原】画流程图工具visio使用技巧汇总
最近写论文需要画不少流程图,有两种选择,一是word, 二是visio.原先一直用word画,效果也还可以,但是每个部件画完后为了便于适应排版变动,需要将需要的模块按下ctrl逐个点击选中后进行组合. ...
- 一位资深开发的个人经历 【转自百度贴吧 java吧 原标题 4年java 3年产品 现在又开始做android了】
楼主2007年从一家天津的三流大学毕业.毕业前报了一个职位培训,毕业后可以推荐工作.因为推荐的公司都是北京的,所以就来北京了. 找了一个月工作,没有找到要我的,就在出租屋里宅了起来,打着考研的旗号,又 ...
- 【原】http缓存与cdn相关技术
摘要:最近要做这个主题的组内分享,所以准备了一个星期,查了比较多的资料.准备的过程虽然很烦很耗时间,不过因为需要查很多的资料,因此整个过程下来,对这方面的知识影响更加深刻.来来来,接下来总结总结 一 ...
- 使用jsPlumb制作流程图设计器
jsPlumb是一个比较强大的绘图组件,它提供了一种方法,主要用于连接网页上的元素.在现代浏览器中,它使用SVG或者Canvas技术,而对于IE8以下(含IE8)的古董浏览器,则使用VML技术. 项目 ...
- 用HTML5构建一个流程图绘制工具
在我们的开发工程中经常会使用到各种图,所谓的图就是由节点和节点之间的连接所形成的系统,数学上专门有一个分支叫图论(Graph Theroy).利用图我们可以做很多工具,比如思维导图,流程图,状态机,组 ...
- 动态流程图关于jointJs的使用
这段时间由于业务需要,需要展现动态的流程图.具体实现效果如图所示: jointJS中的线条以及框都是依赖SVG进行的二次开发.建议初学者先学习svg里相关属性,便于在阅读jointJs的API或者de ...
- Java CAS同步机制 原理详解（为什么并发环境下的COUNT自增操作不安全）: Atomic原子类底层用的不是传统意义的锁机制，而是无锁化的CAS机制，通过CAS机制保证多线程修改一个数值的安全性。
精彩理解: https://www.jianshu.com/p/21be831e851e ; https://blog.csdn.net/heyutao007/article/details/19 ...
- [转]jsPlumb插件做一个模仿viso的可拖拉流程图
原贴:https://www.cnblogs.com/sggx/p/3836432.html 前言 这是我第一次写博客,心情还是有点小小的激动!这次主要分享的是用jsPlumb,做一个可以给用户自定义 ...
随机推荐
- APP inventor 学习
中文教程:https://web.17coding.net/ 网页在线开发:http://app.gzjkw.net/#1 ai2.appinventor.mit.edu http://appinve ...
- 更改yii框架入口文件位置，修改前后端访问路径
将frontend/web/index.php复制到项目根目录,修改为: <?php defined('YII_DEBUG') or define('YII_DEBUG', true); def ...
- 第八届极客大挑战 Web-php绕过
0x01.web-PHP的悖论1 题目: 链接:http://game.sycsec.com:2009/10111.php 解题思路: 1.首先,web对于选择二进制方向的我这个菜鸡绝对是十分懵逼的, ...
- springAOP实现原理
spring AOP实现原理, spring 会在初始化的时候,创建一个BeanPostProcessor(AnnotationAwareAspectJAutoProxyCreator)用来为类注入切 ...
- JQuery DOM操作：设置内容&属性&添加元素&插入元素&包裹&克隆&移除&替换
JQuery text().html().val() $(elem).text(str):添加文本内容str到elem类型元素,返回jQuery对象 $(elem).text():返回第一个elem标 ...
- 转专业后对于C语言补修的一些体会(2)
第三章,有以下几个比较重要的点: 1. 强制类型转换. 强制类型转换是C语言中一个十分重要的工具,在C语言的使用中,有很多需要用到强制类型转换的地方,比如在除法中,如果想要得到正确的浮点结果,一般要确 ...
- HDU 4699 Editor(模拟 对顶栈)
题目大意: 给定一个整数序列 维护5种操作 次数<1e6 I x: 光标位置插入x 然后光标位于x之后 D: 删除光标前一个数 L: 光标左移 R: 光标右移 Q k: 询问位置k之前的最大前缀 ...
- Codeforces Round #600 (Div. 2) - B. Silly Mistake(模拟)
题意:有一个公司,每天有员工进出,$a[i]>0$时表示$a[i]$这个员工进入公司,$a[i]<0$时表示$-a[i]$这个员工出公司,公司对进出办公室有一些严格的规定 员工每天最多只能 ...
- Spring、SpringMvc、MyBatis 整合
web.xml SSMProject示例项目下载 SSMProject_jar包 <?xml version="1.0" encoding="UTF-8& ...
- Binary Heap(二叉堆) - 堆排序
这篇的主题主要是Heapsort(堆排序),下一篇ADT数据结构随笔再谈谈 - 优先队列(堆). 首先,我们先来了解一点与堆相关的东西.堆可以实现优先队列(Priority Queue),看到队列,我 ...