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();
}
});
后面是给每个元素（不包含连线）添加了一个点击事件，弹出一个模态框，显示当前点击的内容。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript中split与join函数的进阶使用技巧
Javascript拥有两个相当强大而且受开发者喜爱的函数:split 与join 俩对立的函数.这俩函数能让string与array两种类型互换,也就是数组能被序列化为字符串,反之亦然.我们能把这俩函数发挥得淋漓尽致.下面就来探索里面的一些有趣的应用, 首先介绍一下这两个函数: String.prototype.split(separator, limit) separator把字符串分割为数组,可选参数limit定义了生成数组的最大length. "85@@86@@53".spli
-
JavaScript中push(),join() 函数 实例详解
定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) arrayObject.join(separator). 参数描述newelement1必需.要添加到数组的第一个元素.newelement2可选.要添加到数组的第二个元素.newelementX可选
-
javaScript之split与join的区别(详解)
共同点:split与join函数通常都是对字符或字符串的操作: 两者的区别: (1)split()用于分割字符串,返回一个数组, 例如 var string="hello world?name=xiaobai"; var splitString = string.split("?"); console.log(splitString);//["hello world","name=xiaobai"] split()只有一个参数
-
JavaScript中join()方法的使用简介
JavaScript数组join()方法加入数组的所有元素为一个字符串. 语法 array.join(separator); 下面是参数的详细信息: separator : 指定字符串分开数组的每个元素.如果省略,则数组元素用逗号分隔. 返回值: 返回接合所有数组元素之后的字符串. 例子: <html> <head> <title>JavaScript Array join Method</title> </head> <body>
-
javascript中join方法实例讲解
我们先来看一下Array.join()函数的基本语法 Array.join([separator]) separator表示用于分隔数组的每个元素的字符串.如果保留默认数组元素,请用逗号(,)分隔. 此函数返回通过使用分隔符连接数组的所有元素而创建的字符串.如果未提供分隔符,则使用逗号(,)连接数组元素,因为它是此函数的默认分隔符.如果提供空字符串作为分隔符,则元素将直接连接,而它们之间没有任何字符.如果array为空,则此函数返回空字符串. 下面我们来看具体的示例 例1: 代码如下 <!DOC
-
JavaScript中join()、splice()、slice()和split()函数用法示例
本文实例讲述了JavaScript中join().splice().slice()和split()函数用法.分享给大家供大家参考,具体如下: join() join() 方法用于把数组中的所有元素放入一个字符串. 元素是通过指定的分隔符进行分隔的. <script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2
-
JointJS流程图的绘制方法
最近项目上需要用流程图来做问题定界分析,之前有同事用jsPlumb做过,但是阅读代码后觉得比较麻烦,所以自己又找了一圈,找到一个叫Dagre-D3的开源类库,画出来的效果如下图,Dagre-D3最大的优点就是可以实现自动布局,你只需要put数据就可以了,但是缺点就是自动布局后的连线会比较乱,而且连线不是横平竖直的,对于流程图不复杂的还好,稍微复杂点画出来的连线就没法看.最后还是被pass了. jsPlumb地址:https://jsplumbtoolkit.com Dagre-D3 Git地址:
-
jQuery实现的网格线绘制方法
本文实例讲述了jQuery实现的网格线绘制方法.分享给大家供大家参考,具体如下: 效果图如下: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="
-
Android编程绘图操作之弧形绘制方法示例
本文实例讲述了Android编程绘图操作之弧形绘制方法.分享给大家供大家参考,具体如下: /** * 绘制弧形图案 * @description: * @author ldm * @date 2016-4-25 下午4:37:01 */ public class ArcsActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedIns
-
C#中TreeView节点的自定义绘制方法
本文实例讲述了C#中TreeView节点的自定义绘制方法.分享给大家供大家参考.具体如下: if ((e.State & TreeNodeStates.Selected) != 0) { //演示为绿底白字 e.Graphics.FillRectangle(Brushes.DeepSkyBlue, e.Node.Bounds); Font nodeFont = e.Node.NodeFont; if (nodeFont == null) nodeFont = ((TreeView)sender)
-
Python 堆叠柱状图绘制方法
本文介绍了Python 堆叠柱状图绘制方法,分享给大家,具体如下: ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' >>文件: 堆叠直方图.py >>作者: liu yang >>邮箱: liuyang0001@outlook.com >>博客: www.cnblogs.com/liu66blog '''''
-
python matplotlib模块基本图形绘制方法小结【直线，曲线，直方图，饼图等】
本文实例讲述了python matplotlib模块基本图形绘制方法.分享给大家供大家参考,具体如下: matplotlib模块是python中一个强大的绘图模块 安装 pip install matplotlib 首先我们来画一个简单的图来感受它的神奇 import numpy as np import matplotlib.pyplot as plt import matplotlib zhfont1=matplotlib.font_manager.FontProperties(fname
-
matplotlib 三维图表绘制方法简介
1. python三维图表绘制方法简介 python三维图表的绘制算是二维图表的一个进阶版本,本质上和二维图表的绘制并无差别,唯一的区别在于使用的库略有差异. 相较于二维图表使用的pyplot库,三维图表的绘制使用的是Axes3D库. 库引入语句为: from matplotlib import pyplot as plt from mpl_toolkits.mplot3d import Axes3D 上下的操作就和二维图表绘制大差不差了,首先定义三维画布,然后向里面绘制三维图表,最后打印出结果
-
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
最近学了下 python opencv,分享下使用 opencv 在图片上绘制常用图形的方法. 案例中实现了在图片中添加线段.圆形.矩形.椭圆形以及添加文字的方法,使用 opencv2 实现的. 实现方法 1)画线段 cv.line 在图片中绘制一段直线 # 绘制线段 # 参数1:图片 # 参数2:起点 # 参数3:终点 # 参数4:BGR颜色 # 参数5:宽度 cv2.line(img, (60, 40), (90, 90), (255, 255, 255), 2); 参数说明 参数 值 说明
-
Python OpenCV中的drawMatches()关键匹配绘制方法
目录 作用说明 函数原型 参数详解 结果 作用说明 该方法被用于绘制关键点的匹配情况.我们看到的许多匹配结果都是使用这一方法绘制的——一左一右两张图像,匹配的关键点之间用线条链接. 函数原型 cv.drawMatches( img1, keypoints1, img2, keypoints2, matches1to2, outImg[, matchColor[, singlePointColor[, matchesMask[, flags]]]]) -> outImg cv.drawMatche
-
解读等值线图的Python绘制方法
目录 等值线图的Python绘制方法 python等值线图绘制,计算合适的等值线间距 总结 等值线图的Python绘制方法 等值线图或等高线图在科学界经常用到,它是由一些封闭的曲线组成的,来表示三维结构表面. 虽然看起来复杂,其实用matplotlib实现起来并不难. 代码如下: import numpy as np import matplotlib.pyplot as plt dx=0.01;dy=0.01 x=np.arange(-2.0,2.0,dx) y=np.arange(-2.0,