[原]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">&times;</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,做一个可以给用户自定义 ...

随机推荐

GitBook的账号注册和安装使用（一）
1.GitBook账号注册 GitBook原注册地址 https://legacy.gitbook.com/join 改为: https://www.gitbook.com/ (1)注册账号:htt ...
eclipse 切换主题Theme
eclipse切换主题theme 1. 打开help -> eclipse marketplace,搜索theme 2. 点击右侧安装后一直继续,直到安装完成 3. 安装完成后会重启eclips ...
CSS 动画过程及间接实现样式延时
/* 过度动画自动归位 */ @keyframes animation_button_scene { 0% { background: #9cacb4; } 10% { /* 样式过度2 */ } 6 ...
控制反转（IOC）和依赖注入（DI)
控制反转(IOC)和依赖注入(DI)IoC(Inversion of Control,控制反转) 是Spring 中一个非常非常重要的概念,它不是什么技术,而是一种解耦的设计思想.它的主要目的是借助于 ...
通过web页面修改nginx配置
资源路径:https://download.csdn.net/download/song_yan_/12002460 nginx动态配置一.页面展示二.前端代码 (1)jsp页面(nginxCon ...
总结String类的常用方法
总结String类的常用方法 1. 获取字符串长度 public int length() 2. 获取字符串某一位置的字符 public char charAt(int index) 注意:字符串中第 ...
lucky 的时光助理（3）
今天lucky小姐哭笑不得的说, 昨天下班时跟经理一起走的时候, 地铁站手机被小偷偷走,那时一个人孤单单的,除了惊愕, 她不知道该去联系谁, 借了同事的手机,给家里打去电话. 她说,因为那是她唯一记得 ...
计算机二级-C语言-对文件的读写操作。链表的定义与赋值。对字符串的遍历和处理。
//程序填空题:在此程序中,通过定义学生结构体变量,存储了学生的学号,姓名和三门课的成绩.所有学生数据均以二进制方式输出到文件中.函数fun()函数的功能是重写形参filename所指文件中最后一个学 ...
「WC2013」糖果公园
「WC2013」糖果公园传送门树上带修莫队板子题. 看懂题意后就是板子题了. 参考代码: #include <algorithm> #include <cstdio> #i ...
Python - __getattr__和__getattribute__的区别
传送门 https://docs.python.org/3/reference/datamodel.html#object.__getattr__ https://docs.python.org/3/ ...

[原]JointJS流程图

[原]JointJS流程图的更多相关文章

随机推荐

热门专题