JointJS流程图的绘制方法

最近项目上需要用流程图来做问题定界分析，之前有同事用jsPlumb做过，但是阅读代码后觉得比较麻烦，所以自己又找了一圈，找到一个叫Dagre-D3的开源类库，画出来的效果如下图，Dagre-D3最大的优点就是可以实现自动布局，你只需要放数据就可以了，但是缺点就是自动布局后的连线会比较乱，而且连线不是横平竖直的，对于流程图不复杂的还好，稍微复杂点画出来的连线就没法看。最后还是被及格了。

jsPlumb地址：https://jsplumbtoolkit.com

Dagre-D3 Git地址：https://github。com/CPE ttit/Dag re-D3

后面经过一番百度，最终决定用JointJS，官网：www.jointjs.com，相比Dagre-D3和关节垂直的应用程序接口很详细，代码量少，连接线有多种选择，封装了多种常用的形状，而且能画的图很多，官方也给了一些演示可以参考。下面是我用JointJS画出来的流程图：

依赖：在官网的下载页面都能找到

链接rel='样式表type=' text/CSS ' href=' joint。CSS '/脚本src=' http : jquery。量滴js '/script script src=' http : lo dash。量滴js '/script script src=' http :主干-min。js '/script script src=' http : joint。js '/脚本我的演示里还引用了引导程序的依赖用来显示模态框

超文本标记语言代码

body div id=' paper ' class=' paper '/div class=' modal fade搜索面板' id=' detail modal ' tabindex='-1 '角色=' dialog ' aria-labelledby=' myModalLabel ' div class=' modal-dialog '角色=' document ' div class=' modal-content ' div class=' modal-header '按钮类型=' button ' class=' Close ' data-mission=' modal ' aria-label=' Close ' span aria-hidden=' true‘/span/button H4类=’详细信息/H4/div class=' modal-body '/div class=' modal-footer '按钮类型=' button ' class=' BTN BTN-default '数据-misse=' modal '关闭/按钮/div/div/div/body js代码

首先是定义画板和画布，这里重写了元素视图和LinkView，目的是为了让画出来的流程图不能被删除和编辑

var graph=新关节。迪亚。graph()；var元素视图=关节。迪亚。元素视图。extend({指针向下：函数(){ this ._ click=truejoint。迪亚。元素视图。原型。指针向下。应用(这个，参数)；}，pointermove:函数(evt，x，y) {这个._ click=falsejoint。迪亚。元素视图。原型。指针移动。应用(这个，参数)；}，pointerup:函数(evt，x，y) { if (this ._click) { //在纸上和元素本身触发一个事件this.notify('cell:click '，evt，x，y)；} else { joint。迪亚。元素视图。原型。指针向上。应用(这个，参数)；} } });var LinkView=关节。迪亚。LinkView。extend({ add vertex : function(evt，x，y) {}，remove vertex : function(end type){ }，pointerdown:function(evt，x，y){ })；//定义画布var paper=新关节。迪亚。纸张({ El : $(' # paper ')、宽度： 1200、高度： 600、网格尺寸： 1、模型：图形、元素视图：元素视图、链接视图：链接视图})；//纸张$el.css('指针事件','无')//去除默认样式，使所有事件不可用然后我写了两个函数分别用来创建形状和连线，这样写可以减少代码量，官方的演示也大都是这样写的

//定义形状var状态=函数(x，y，形状，背景，文本){ var cellif(shape==' rect '){ cell=new joint。形状。基本的。rect({位置： { x : x，y: y }，//坐标尺寸： {宽度： 140,高度： 40 },//宽高attrs : { rect : { fill : { type : '线性渐变}，stop :[{ offset : ' 0% '，color: background }，//渐变开始{ offset: '100% '，color: '#fe8550' }//渐变结束]，attrs: { x1: '0% '，y1: '0% '，x2: '0% '，y2: '100%' }，stroke:后台，//边框颜色笔画宽度' : 1//边框大小}，text: { text: text } //显示文字} });} else if(shape==' ellipse '){ cell=new joint。形状。基本的。椭圆({位置： { x : x，y: y }，//坐标尺寸： {宽度： 140,高度： 40 },//宽高attrs : {椭圆： {填充： {类型： '线性渐变'，停止：[{偏移量： ' 0% '，颜色：背景}，//渐变开始{ offset: '100% '，color: '#FFFFFF' }//渐变结束]，attrs: { x1: '0% '，y1: '0% '，x2: '0% '，y2: '100%' }，stroke:后台，//边框颜色笔画宽度' : 1//边框大小}，text: { text: text } //显示文字} });} graph.addCell(单元格);返回单元格；};//定义连线函数链接（源、目标、标签){ var cell=新关节。迪亚。链接({ source : { id : source。id }，target: { id: target.id }，标签:[{ position : 0 0.5，attrs : { text : { text : label | | ' '，' font-weight ' : ' bold ' } } } }]，router:设置连线弯曲样式曼哈顿直角attrs :“{ 0 }”.连接： { stroke: '#333333 '，//连线颜色笔画宽度' : 2//连线粗细}, '.标记-目标： { fill: '#333333 '，//箭头颜色d: 'M 10 0 L 0 5 L 10 10 z'//箭头样式} } });graph.addCell(单元格);返回单元格；}最后就是我们实际的业务代码了，这里我们可以整理一下数据结构，把数据定义成数据格式，然后写一个函数通过数据直接生成流程图，当然坐标需要寻找规律自己计算一下

//创建元素var start=状态(500,100,'椭圆，' #00FFFF '，'视频播放成功率');var state1=状态(500，200，' rect '，' #f7a07b '，' GET响应成功率');var state2=状态(400，300，' rect '，' #f7a07b '，' HTTP错误码分析');var state3=state(600，300，' rect '，' #f7a07b '，joint.util.breakText('TCP异常和其他原因，{ width :80 })；var状态4=状态(400，400，' rect '，' #f7a07b '，' 4XX，5XX分析');var state5=state(600，400，' rect '，' #f7a07b '，'接口以上分析');var state6=state(750，400，' rect '，' #f7a07b '，'接口以下分析');//创建连线链接（开始，状态1 ' ');链接（状态1,状态2,'70% ');链接（状态1,状态3,' 70% ');链接（状态2,状态4 ' ');链接（状态3,状态5 '是');链接（状态3,状态6 '否');//给所有元素添加点击事件paper.on('cell:click '，function(e){ $(' # Detail MoDEL .模态体')。html(" ")；var arr=$(' # ' e . id ' ts pan ')；如果(arr。长度====1){ $(' #详细模式.模态体')。追加($(arr).html())；$('#detailModal ').modal()；} else { var tmp=$。每个(arr，function(k，v){ tmp=$(v)).html()；});$(' # Detail MoDEL .模态体')。追加(tmp)；$('#detailModal ').modal()；} });后面是给每个元素（不包含连线)添加了一个点击事件，弹出一个模态框，显示当前点击的内容。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。