jsplumb介绍
使用jsPlumb插件实现动态连线功能
使⽤jsPlumb插件实现动态连线功能这周去看了两天的⽻⽑球亚锦赛，⼯作有提前晚上加班做⼀些，但是技术⽂章却拉下了。
这段时间⼀直在寻找可以实现前端元素动态连线的功能，找了好⼏个库，考虑过⽤d3或者原⽣svg和canvas来实现，最后和同项⽬的同事商量后决定使⽤jsPlumb插件库来做。
jsPlumb是⼀个强⼤的JavaScript连线库，它可以将html中的元素⽤箭头、曲线、直线等连接起来，适⽤于开发Web上的图表、建模⼯具等，其实jsPlumb可能主要是⽤来做流程图的，它在实现这⽅⾯的功能上⾮常强⼤，我在项⽬中只使⽤了它少部分功能，来实现项⽬中连线的效果。
连线效果initJSPlumb = () => {this.jsp = jsPlumb.getInstance({//锚点位置；对任何没有声明描点的Endpoint设置锚点，⽤于source及target节点Anchor: ["Right", "Left"],Anchors: ["Right", "Left"], //连线的source和target AnchorConnectionsDetachable: false, //连线是否可⽤⿏标分离ConnectionOverlays: [ //连线的叠加组件，如箭头、标签["Arrow", { //箭头参数设置location: 1,visible: true,width: 11,length: 11,id: "ARROW",events: {click: function () {}}}],["Label", { //标签参数设置location: 0.1,id: "label",cssClass: "aLabel", //hover时label的样式名events: {tap: function () {}},visible: true}]],Connector: "Bezier", //连线的类型，流程图(Flowchart)、贝塞尔曲线等//⽗级元素id；假如页⾯元素所在上层不同，最外层⽗级⼀定要设置Container: "module",//如果请求不存在的Anchor、Endpoint或Connector，是否抛异常DoNotThrowErrors: false,//通过jsPlumb.draggable拖拽元素时的默认参数设置DragOptions: {cursor: 'pointer', zIndex: 2000},DropOptions: {}, //target Endpoint放置时的默认参数设置Endpoint: "Dot", //端点（锚点）的样式声明//⽤jsPlumb.connect创建连接时，source端点和target端点的样式设置Endpoints: [null, null],EndpointOverlays: [], //端点的叠加物//端点的默认样式EndpointStyle: {fill: 'transparent', stroke: '#1565C0', radius: 4,strokeWidth: 1},EndpointStyles: [null, null], //连线的source和target端点的样式//端点hover时的样式EndpointHoverStyle: {fill: '#1565C0', stroke: '#1565C0', radius: 4,strokeWidth: 1},//连线的source和target端点hover时的样式EndpointHoverStyles: [null, null],//连线hover时的样式HoverPaintStyle: {stroke: '#1565C0', strokeWidth: 3},LabelStyle: {color: "black"}, //标签的默认样式，⽤css写法。
前端流程图jsplumb学习笔记
前端流程图jsplumb学习笔记1、这篇博客很好,另外两个是官⽹⽂档2、Jsplump流程图画虚线⽤"dashstyle": "2 4"PaintStyle: {lineWidth: 3,strokeStyle: color,"dashstyle": "2 4"}3、简单连接jsPlumb.connect({source:"window4",target:"window5",anchors:["BottomRight","TopLeft"],paintStyle:{strokeWidth:7,stroke:'rgb(131,8,135)'},hoverPaintStyle:{ stroke:"rgb(0, 0, 135)" },endpointStyle:{ width:40, height:40 },endpoint:"Rectangle",connector:["Flowchart", { midpoint: 0.8}],overlays:[[ "Label", {label:"FOO", id:"label", location:0.7}]]});（1）connector:["Flowchart", { midpoint: 0.8}],设置折线抓点的位置，0-1，越⼩离源端点越近(2)label location 0-1, 越⼩离源端点越近(3)配置项写法都是name:[“type1”,{option1:value,option2:value2}]（4）anchors:[[ 0,0.5, -1, 0 ],"RightMiddle"], ⽤数组⾃定义anchor位置，[x,y,dx,dy],x和y为以noder的左上⾓为起点，向下或向右增加到1。
jsplumb流程图，常用功能配置记录
jsplumb流程图，常⽤功能配置记录前⾔：jsplumb 有2个版本⼀个Toolkit Edition（付费版），另外⼀个就是Community Edition（社区版本）。
Toolkit Edition版本功能集成的⽐较丰富，社区版本的就差好多，很多功能都没有，需要我们⾃⼰去添加，当然了⾃⼰添加多多少少有些⿇烦，⽽且也不完善。
但是我们还是⽤Community Edition（社区版本），毕竟不收费，没办法，下边所说的版本默认都是以社区版。
jsplumb.png上图也就是我这次⽤到的jsplumb实现的功能，连接线能够拖拽⽣成，也可以删除，编辑label。
1、数据结构{"nodes": [{ //节点集合"icon": "el-icon-loading","id": "start","nodeStyle": {"top": 100,"left": 200},"text": "开始","type": "circle"}, {"icon": "el-icon-upload","id": "end","nodeStyle": {"top": 300,"left": 400},"text": "结束","type": "circle"}] ,"connections": [{ //连接线集合"sourceId": "start","targetId": "end","label":"编辑"}]}jsplumb实例⾥⾯的数据结构就是这样的，这⾥我们沿⽤他的数据结构，你也可以⾃⼰定义⾃⼰想的数据结构，但是对⽐起来这个结构是最清晰也最⽅便的。
【IT专家】保存并载入一个关于jsPlumb的流程图。
本文由我司收集整编，推荐下载，如有疑问，请与我司联系保存并载入一个关于jsPlumb的流程图。
2011/09/13 11063 What’s the best approach to save and load an flowchart on jsPlumb? 在jsPlumb上保存和加载流程图的最佳方法是什么? 9 I managed to save the chart by simply having all the elements inside an array of objects, where each object has source and target nodes, x, y coordinates. 我通过简单地将所有元素放在一个对象数组中来保存图表，其中每个对象都有源节点和目标节点x、y坐标。
When saving, simply do JSON.stringify(whole_object), and if loading, simply JSON.parse() and manually position the nodes as well as connect them. 在保存时，只需执行JSON.stringify(whole_object)，如果加载，只需JSON.parse()，手动定位节点并连接它们。
7 My solution save and load jsPlumb: 我的解决方案save and load jsPlumb: function Save() { $(“.node”).resizable(“destroy”); Objs = []; $(‘.node’).each(function() { Objs.push({id:$(this).attr(‘id’), html:$(this).html(),left:$(this).css(‘left’),top:$(this).css(‘top’),width:$(this).css(‘width’),he ight:$(this).css(‘height’)}); console.log(Objs); console.log(o); s+=‘ div id=“‘+ o.id+’” style=“left:’+ o.left+’; top:’+ o.top+’; width:’+ o.width +’; height:’+ o.height +’ “ ‘+ o.html+’ /div $(‘#main’).html(s); UPD Demo: jsfiddle/Rra6Y/137/ 乌利希期刊指南演示:jsfiddle/Rra6Y/137/ Note: if demo does not work in JsFiddle, make sure it points to an existing jsPlumb link (links are listed in “External Resources” JsFiddle menu item 注意:如果demo在JsFiddle不工作，请确保它指向一个现有的jsPlumb链接(链接。
jquery.jsPlumb实现拓扑图
jquery.jsPlumb实现拓扑图基于jquery.jsPlumb编写拓扑图，供⼤家参考，具体内容如下要求：实现公司组织结构拓扑关系，可展开，可收拢；动态数据展⽰；叶⼦节点可点击；实现办法：1 国内还有⼀个插件也⽐较简单，但是该插件只能全部展开，并不能收拢，放弃了该办法；2 最后选择了这个插件，因为相关资料很少，所以每步都是⾃⼰摸索出来的；对数据的要求：因为该插件的每个节点都是⼀个具有独⽴不同id的div模块，所以json数据要求有⼀个id属性，并且所有的id都要不⼀样；实现的原理：1 先定位所有的节点（这个还简单点，只要依次遍历数据就⾏）；2 添加拓扑关系；（这个地⽅⽐较复杂，尤其是点击节点时，其他节点收缩，直接点展开，⾥⾯的循环量特别⼤，⼏乎都是在⼀个⼤循环⾥⾯套⽤了很多的⼦循环）1 html部分（注意事项，⾥⾯的图⽚⾃⼰设置）<!DOCTYPE html><html><head><meta charset="utf-8"><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript" src="scripts/jquery.jsPlumb-1.4.0-all.js"></script><script type="text/javascript" src="scripts/test.js"></script><style type="text/css">.rootNode {// background-color: #79deff;width: 36px;height: 36px;position: absolute;background-image: url(images/monitor_server.png);background-size: 32px 32px;background-repeat: no-repeat;background-position:center;/* -webkit-box-shadow: #909090 0px 0px 10px;-moz-box-shadow: #909090 0px 0px 10px;box-shadow: #909090 0px 0px 10px;*/}.instanceNode {// background-color: #50d4ff;width: 36px;height: 36px;position: absolute;background-image: url(images/instance_big.png);background-size: 32px 32px;background-repeat: no-repeat;background-position:center;-moz-background-size: 32px 32px;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/instance_big.png', sizingMethod='scale')\9;-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/instance_big.png',sizingMethod='scale')"\9;cursor:pointer;/* -webkit-box-shadow: #666 0px 0px 10px;-moz-box-shadow: #666 0px 0px 10px;box-shadow: #666 0px 0px 10px; */}.instanceNode_leaf {// background-color: #50d4ff;width: 36px;height: 36px;position: absolute;background-image: url(images/user_online.png);background-size: 32px 32px;background-repeat: no-repeat;background-position:center;-moz-background-size: 32px 32px;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/user_online.png', sizingMethod='scale')\9;-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/user_online.png',sizingMethod='scale')"\9;cursor:pointer;/* -webkit-box-shadow: #666 0px 0px 10px;-moz-box-shadow: #666 0px 0px 10px;box-shadow: #666 0px 0px 10px; */}.nodeWord{//font-weight: bold;font-size: 12px;color:white;text-align: center;position: absolute;bottom: -20px;width: 100%;}.cursorEndpoint{cursor:pointer;}body{background:#27363F;}</style></head><body style="overflow: scroll;"><div id="top_server" class="rootNode"><div style=""></div></div></body></html>2 test.jsvar tree_json=[{"id": "1","text": "国核院","iconCls": "icon-org","state": "closed","children": [{"id": "2","text": "⼟⽊⼯程部","iconCls": "icon-org","state": "closed","children": [{"id": "3","text": "科室⼀","iconCls": "icon-org","state": "closed","children": [{"id": "4","text": "u110","iconCls": "icon-man"},{"id": "5","text": "u120","iconCls": "icon-man"},{"id": "51","text": "u120","iconCls": "icon-man"}]},{"id": "6","text": "财务","iconCls": "icon-org","state": "closed","children": [{"id": "7","text": "u111","iconCls": "icon-man"},{"id": "71","text": "u111","iconCls": "icon-man"}]}]},{"id": "8","text": "建筑⼯程部","iconCls": "icon-org","state": "closed","children": [{"id": "9","text": "科室⼀","iconCls": "icon-org","state": "closed",},{"id": "11","text": "财务","iconCls": "icon-org","state": "closed","children": [{"id": "12","text": "u114","iconCls": "icon-man"}]}]},{"id": "13","text": "综合室","iconCls": "icon-org","state": "closed","children": [{"id": "14","text": "u113","iconCls": "icon-man"},{"id": "141","text": "u113","iconCls": "icon-man"}]},{"id": "15","text": "重庆公司","iconCls": "icon-org","state": "closed","children": [{"id": "16","text": "⼟⽊⼯程部","iconCls": "icon-org","state": "closed","children": [{"id": "17","text": "科室⼀","iconCls": "icon-org","state": "closed","children": [{"id": "18","text": "u115","iconCls": "icon-man" }]},{"id": "19","text": "财务","iconCls": "icon-org","state": "closed","children": [{"id": "20","text": "张⽂涛","iconCls": "icon-man"}]}]},{"id": "21","text": "建筑⼯程部","iconCls": "icon-org","state": "closed","children": [{"id": "24","text": "财务","iconCls": "icon-org","state": "closed","children": [{"id": "25","text": "李⼩进","iconCls": "icon-man"}]}]}]}]}];$.ajax({url: 'scripts/text.json',type: 'GET',dataType: 'json',data: {},}).done(function() {console.log("success");myjson=tree_json;showTopo();}).fail(function() {console.log("error");}).always(function() {console.log("complete");});function showTopo(){$("#top_server").css({"left":"50%","top":"5%"});$(document).on({mouseover:function(){$(this).css({"background-color":"#79deff","box-shadow":"#909090 0px 0px 10px", "-webkit-box-shadow": "#909090 0px 0px 10px","-moz-box-shadow": "#909090 0px 0px 10px"});},mouseout:function(){$(this).css({"background-color":"","box-shadow":"","-webkit-box-shadow": "","-moz-box-shadow": ""});},click:function(){alert($(this).text());}},".instanceNode_leaf");var company=myjson[0]["children"]; //初始化公司数组var companyNumber=company.length; //var company_department_arr=[]; //获取部门数组var company_department_sec_arr=[]; //获取科室数组//元素的摆放先摆放公司部门科室员⼯if(tree_json[0].hasOwnProperty("children")){elementLocation(company,companyNumber);}//开始定义连线和点击事件jsPlumb.ready(function() {jsPlumb.draggable("top_server"); //定义可拖拽var hoverPaintStyle = { lineWidth:2,strokeStyle:"#dedede" }; //⿏标经过时线宽度和颜⾊jsPlumb.importDefaults({DragOptions : { cursor: 'pointer'}, //拖动时⿏标停留在该元素上显⽰指针，通过css控制EndpointStyles : { width:10, height:10,cursor: 'pointer'},//连接点的默认颜⾊Connector : "Straight", //设置连线为直线Endpoint : "Rectangle",//连接点的默认形状Anchor : "Top",//连接点的默认位置MaxConnections:1000,//同上ConnectionsDetachable:false,HoverPaintStyle:hoverPaintStyle});var defaults = {paintStyle:{ fillStyle:"#B4B9C5" },//设置连接点的颜⾊connectorStyle:{ strokeStyle:"#B4B9C5", lineWidth:2 },//连线颜⾊、粗细connector:[ "Flowchart", { stub:[10, 20], gap:5, cornerRadius:2} ],isSource:true,isTarget:true,endpoint:"Blank"};var rootnode={endpoint:["Image", { src:"images/sub.png" }],//设置连接点的形状为圆形paintStyle:{ fillStyle:"#B4B9C5" },//设置连接点的颜⾊connectorStyle:{ strokeStyle:"green", lineWidth:2 },//连线颜⾊、粗细//connector:["Straight",{gap:5}],connector:[ "Flowchart", { stub:[10, 20], gap:10, cornerRadius:2} ],cssClass:"cursorEndpoint"};var s1=jsPlumb.addEndpoint("top_server", {anchor:"Bottom"},rootnode);//根节点设置//添加拓扑关系for(var i=0;i<companyNumber;i++){var company_department=company[i].children; //四个公司下⾯的部门jsPlumb.draggable("instance_"+company[i].id); //设置四个公司可拖拽var s2=jsPlumb.addEndpoint("instance_"+company[i].id,defaults); //设置四个公司的节点 jsPlumb.connect({source:s1, target:s2}); //连接服务器和是个公司;if(company_department.length>0){var s2_root=jsPlumb.addEndpoint("instance_"+company[i].id, {anchor:"Bottom"},rootnode); //把四个公司设置成根节点//对公司绑定click事件s2_root.bind("click", function(endpoint) {if(endpoint.getParameter("img")&&endpoint.getParameter("img")=="add"){endpoint.setParameter("img","sub");endpoint.setImage("images/sub.png");for(var k=0;k<endpoint.connections.length;k++){endpoint.connections[k].setVisible(true);$("#"+endpoint.connections[k].targetId).show();var oid=endpoint.connections[k].targetId.split("_")[1];jsPlumb.show("instance_"+oid,true);}//隐藏其他部门以及部门下的组织for(var m=0;m<company.length;m++){if(endpoint.elementId!="instance_"+company[m].id){var conn=jsPlumb.select({source:"instance_"+company[m].id});for(var n=0;n<conn.length;n++){$("#"+conn.get(n).targetId).hide();jsPlumb.hide(conn.get(n).targetId,true);var oid=conn.get(n).targetId.split("_")[1];var conn_org=jsPlumb.select({source:"instance_"+oid});for(var n1=0;n1<conn_org.length;n1++){$("#"+conn_org.get(n1).targetId).hide();jsPlumb.hide(conn_org.get(n1).targetId,true);var oid_1=conn_org.get(n1).targetId.split("_")[1];var conn_org_l1=jsPlumb.select({source:"instance_"+oid_1});for(var nn1=0;nn1<conn_org_l1.length;nn1++){$("#"+conn_org_l1.get(nn1).targetId).hide();}}}conn.get(0).endpoints[0].setParameter("img","add");conn.get(0).endpoints[0].setImage("images/add.png");conn.setVisible(false);}else{var company_department_orgnize=company[m].children;for(var kk=0;kk<company_department_orgnize.length;kk++){if(company_department_orgnize[kk].hasOwnProperty("children")){jsPlumb.select({source:"instance_"+company_department_orgnize[kk].id}).setVisible(false);jsPlumb.select({source:"instance_"+company_department_orgnize[kk].id}).get(0).endpoints[0].setParameter("img","add"); jsPlumb.select({source:"instance_"+company_department_orgnize[kk].id}).get(0).endpoints[0].setImage("images/add.png"); }}}}}else{endpoint.setParameter("img","add");endpoint.setImage("images/add.png");for(var k=0;k<endpoint.connections.length;k++){endpoint.connections[k].setVisible(false);$("#"+endpoint.connections[k].targetId).hide();jsPlumb.hide(endpoint.connections[k].targetId,true);var oid=endpoint.connections[k].targetId.split("_")[1];var conn_org=jsPlumb.select({source:"instance_"+oid});for(var n1=0;n1<conn_org.length;n1++){$("#"+conn_org.get(n1).targetId).hide();jsPlumb.hide(conn_org.get(n1).targetId,true);var oid_1=conn_org.get(n1).targetId.split("_")[1];var conn_org_l1=jsPlumb.select({source:"instance_"+oid_1});for(var nn1=0;nn1<conn_org_l1.length;nn1++){$("#"+conn_org_l1.get(nn1).targetId).hide();}}}}if (erAgent.indexOf('MSIE') > -1) {jsPlumb.repaintEverything();}});//添加部门拓扑关系，也就是连接公司到部门,遍历部门for(var i1=0;i1<company_department.length;i1++){var company_department_orgnize=company_department[i1].children; //四个公司下⾯的部门的组织jsPlumb.draggable("instance_"+company_department[i1].id); //设置部门可拖拽var s3=jsPlumb.addEndpoint("instance_"+company_department[i1].id,defaults); //设置部门的节点jsPlumb.connect({source:s2_root, target:s3}); //连接四个公司到部门company_department_arr.push(company_department[i1]);if(company_department[i1].hasOwnProperty("children")){var s3_root=jsPlumb.addEndpoint("instance_"+company_department[i1].id, {anchor:"Bottom"},rootnode); //把部门设置成根节点//对部门绑定click事件s3_root.bind("click", function(endpoint) {if(endpoint.getParameter("img")&&endpoint.getParameter("img")=="add"){endpoint.setParameter("img","sub");endpoint.setImage("images/sub.png");for(var k1=0;k1<endpoint.connections.length;k1++){endpoint.connections[k1].setVisible(true);$("#"+endpoint.connections[k1].targetId).show();var oid1=endpoint.connections[k1].targetId.split("_")[1];jsPlumb.show("instance_"+oid1,true);$("#instance_"+oid1).show();}//隐藏其他部门下的科室for(var mm=0;mm<company_department_arr.length;mm++){if(endpoint.elementId!="instance_"+company_department_arr[mm].id){var conn_org1=jsPlumb.select({source:"instance_"+company_department_arr[mm].id});if(company_department_arr[mm].hasOwnProperty("children")){for(var nn=0;nn<conn_org1.length;nn++){$("#"+conn_org1.get(nn).targetId).hide();jsPlumb.hide(conn_org1.get(nn).targetId,true);var oid_s=conn_org1.get(nn).targetId.split("_")[1];var conn_org_l2=jsPlumb.select({source:"instance_"+oid_s});for(var nnn1=0;nnn1<conn_org_l2.length;nnn1++){$("#"+conn_org_l2.get(nnn1).targetId).hide();jsPlumb.hide(conn_org_l2.get(nnn1).targetId,true);var oid_11=conn_org_l2.get(nnn1).targetId.split("_")[1];var conn_org_l11=jsPlumb.select({source:"instance_"+oid_11});for(var nnn2=0;nnn2<conn_org_l11.length;nnn2++){$("#"+conn_org_l11.get(nnn2).targetId).hide();}}}conn_org1.get(0).endpoints[0].setParameter("img","add");conn_org1.get(0).endpoints[0].setImage("images/add.png");conn_org1.setVisible(false);}}else{var company_department_orgnize_sec=company_department_arr[mm].children;for(var kkk=0;kkk<company_department_orgnize_sec.length;kkk++){if(company_department_orgnize_sec[kkk].hasOwnProperty("children")){jsPlumb.select({source:"instance_"+company_department_orgnize_sec[kkk].id}).setVisible(false); jsPlumb.select({source:"instance_"+company_department_orgnize_sec[kkk].id}).get(0).endpoints[0].setPa }}}}}else{endpoint.setParameter("img","add");endpoint.setImage("images/add.png");for(var k1=0;k1<endpoint.connections.length;k1++){endpoint.connections[k1].setVisible(false);$("#"+endpoint.connections[k1].targetId).hide();jsPlumb.hide(endpoint.connections[k1].targetId,true);var oidss=endpoint.connections[k1].targetId.split("_")[1];var conn_org_l2=jsPlumb.select({source:"instance_"+oidss});for(var nnn1=0;nnn1<conn_org_l2.length;nnn1++){$("#"+conn_org_l2.get(nnn1).targetId).hide();jsPlumb.hide(conn_org_l2.get(nnn1).targetId,true);var oid_11=conn_org_l2.get(nnn1).targetId.split("_")[1];var conn_org_l11=jsPlumb.select({source:"instance_"+oid_11});for(var nnn2=0;nnn2<conn_org_l11.length;nnn2++){$("#"+conn_org_l11.get(nnn2).targetId).hide();}}}}if (erAgent.indexOf('MSIE') > -1) {jsPlumb.repaintEverything();}});//添加科室拓扑关系，也就是连接部门到科室;for(var i2=0;i2<company_department_orgnize.length;i2++){var staff=company_department_orgnize[i2].children; //组织下⾯的个⼈jsPlumb.draggable("instance_"+company_department_orgnize[i2].id); //设置组织可拖拽var s4=jsPlumb.addEndpoint("instance_"+company_department_orgnize[i2].id,defaults); //设置组织的节点jsPlumb.connect({source:s3_root, target:s4}); //连接连接部门到组织company_department_sec_arr.push(company_department_orgnize[i2]);if(company_department_orgnize[i2].hasOwnProperty("children")){var s4_root=jsPlumb.addEndpoint("instance_"+company_department_orgnize[i2].id, {anchor:"Bottom"},rootnode); //把组织设置成根节点//绑定科室点击事件s4_root.bind("click", function(endpoint) {if(endpoint.getParameter("img")&&endpoint.getParameter("img")=="add"){endpoint.setParameter("img","sub");endpoint.setImage("images/sub.png");for(var k2=0;k2<endpoint.connections.length;k2++){endpoint.connections[k2].setVisible(true);$("#"+endpoint.connections[k2].targetId).show();}//隐藏其他科室下的⼈for(var mmm=0;mmm<company_department_sec_arr.length;mmm++){if(endpoint.elementId!="instance_"+company_department_sec_arr[mmm].id){var conn_org_2=jsPlumb.select({source:"instance_"+company_department_sec_arr[mmm].id});if(company_department_sec_arr[mmm].hasOwnProperty("children")){for(var nn1=0;nn1<conn_org_2.length;nn1++){$("#"+conn_org_2.get(nn1).targetId).hide();jsPlumb.hide(conn_org_2.get(nn1).targetId,true);//var oid=conn_org_2.get(nn1).targetId.split("_")[1];}conn_org_2.get(0).endpoints[0].setParameter("img","add");conn_org_2.get(0).endpoints[0].setImage("images/add.png");conn_org_2.setVisible(false);}}}}else{endpoint.setParameter("img","add");endpoint.setImage("images/add.png");for(var k2=0;k2<endpoint.connections.length;k2++){endpoint.connections[k2].setVisible(false);$("#"+endpoint.connections[k2].targetId).hide();jsPlumb.hide(endpoint.connections[k2].targetId,true);var oid=endpoint.connections[k2].targetId.split("_")[1];//$("div[id*=_"+oid+"_]").hide();}}if (erAgent.indexOf('MSIE') > -1) {jsPlumb.repaintEverything();}});for(var i3=0;i3<staff.length;i3++){//var staff=company_department_orgnize[i2].children; //组织下⾯的个⼈jsPlumb.draggable("instance_"+staff[i3].id); //设置组织可拖拽var s5=jsPlumb.addEndpoint("instance_"+staff[i3].id,defaults); //设置组织的节点jsPlumb.connect({source:s4_root, target:s5}); //连接连接部门到组织}}}}}}}s1.bind("click", function(endpoint) {if(endpoint.getParameter("img")&&endpoint.getParameter("img")=="add"){endpoint.setParameter("img","sub");endpoint.setImage("images/sub.png");jsPlumb.select({source:"top_server"}).setVisible(true);for(var i=0;i<company.length;i++){jsPlumb.show("instance_"+company[i].id,true);$("#instance_"+company[i].id).show();var company_department=company[i].children; //alert(company[i].id);if(company_department.length>0){jsPlumb.select({source:"instance_"+company[i].id}).setVisible(false);jsPlumb.select({source:"instance_"+company[i].id}).get(0).endpoints[0].setParameter("img","add"); jsPlumb.select({source:"instance_"+company[i].id}).get(0).endpoints[0].setImage("images/add.png"); }}}else{endpoint.setParameter("img","add");endpoint.setImage("images/add.png");jsPlumb.hide("top_server");for(var i=0;i<company.length;i++){var company_department=company[i].children;jsPlumb.hide("instance_"+company[i].id,true);for(var j=0;j<company_department.length;j++){jsPlumb.hide("instance_"+company_department[j].id,true);if(company_department[j].hasOwnProperty("children")){var orgnize=company_department[j].children;for(var j1=0;j1<orgnize.length;j1++){jsPlumb.hide("instance_"+orgnize[j1].id,true);}}}}$(".nodeWord").parent().hide();}if (erAgent.indexOf('MSIE') > -1) {jsPlumb.repaintEverything();}});$(window).resize(function(){jsPlumb.repaintEverything();});});}/** 元素摆放位置--对称分布*/function elementLocation(nodeArr,nodeNumber){if(nodeNumber%2==1){//总节点数是奇数//var num=parseInt(nodeNumber/2);for(var i=0;i<nodeArr.length;i++){if(i<parseInt(nodeNumber/2)){leftLoc=50-10*(i+1);}else if(i>parseInt(nodeNumber/2)){leftLoc=50+10*(i-parseInt(nodeNumber/2));}else{leftLoc=50;}if(nodeArr[i].hasOwnProperty("children")){var html="<div id='instance_"+nodeArr[i].id+"' class=\"instanceNode\" style='top:20%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+nodeArr[i].text+"</div></div>";$("body").append(html);var companyLoc=leftLoc; //在本例中表⽰公司横向定位，做这个是⽅便公司下⾯的部门定位；var companyDepartArr=nodeArr[i].children;var companyDepartArrLength=companyDepartArr.length;companyDepartLocation(companyLoc,companyDepartArr,companyDepartArrLength); //部门定位}else{var html="<div id='instance_"+nodeArr[i].id+"' class=\"instanceNode_leaf\" style='top:20%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+nodeArr[i].text+"</div></div>"; $("body").append(html);}}}else if(nodeNumber%2==0){//总节点数是偶数//var num=parseInt(nodeNumber/2);for(var i=0;i<nodeArr.length;i++){if(i+1<=parseInt(nodeNumber/2)){leftLoc=50-5-10*i;}else if(i+1>parseInt(nodeNumber/2)){leftLoc=50+5+10*(i-parseInt(nodeNumber/2));}if(nodeArr[i].hasOwnProperty("children")){var html="<div id='instance_"+nodeArr[i].id+"' class=\"instanceNode\" style='top:20%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+nodeArr[i].text+"</div></div>";$("body").append(html);var companyLoc = leftLoc;var companyDepartArr=nodeArr[i].children;var companyDepartArrLength=companyDepartArr.length;companyDepartLocation(companyLoc,companyDepartArr,companyDepartArrLength); //部门定位}else{var html="<div id='instance_"+nodeArr[i].id+"' class=\"instanceNode_leaf\" style='top:20%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+nodeArr[i].text+"</div></div>"; $("body").append(html);}}}}//部门定位function companyDepartLocation(nodeLoc,nodeArr,nodeNumber){if(nodeNumber%2==1){for(var j=0;j<nodeNumber;j++){var department=nodeArr[j],leftLoc;if(j<parseInt(nodeNumber/2)){leftLoc=nodeLoc-5*(j+1);}else if(j>parseInt(nodeNumber/2)){leftLoc=nodeLoc+5*j;}else{leftLoc=nodeLoc;}if(department.hasOwnProperty("children")){var html="<div id='instance_"+department.id+"' class='instanceNode' style='top:40%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+department.text+"</div></div>";$("body").append(html);var departmentOrgnize=department.children;var departmentOrgnizeLength=departmentOrgnize.length;var departmentOrgnizeLoc=leftLoc;departmentOrgnizeLocation(departmentOrgnizeLoc,departmentOrgnize,departmentOrgnizeLength); //组织定位}else{var html="<div id='instance_"+department.id+"' class='instanceNode_leaf' style='top:40%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+department.text+"</div></div>"; $("body").append(html);}}}else if(nodeNumber%2==0){for(var j=0;j<nodeNumber;j++){var department=nodeArr[j],leftLoc;if(j+1<=parseInt(nodeNumber/2)){leftLoc=nodeLoc-5-5*j;}else if(j+1>parseInt(nodeNumber/2)){leftLoc=nodeLoc+5+5*(j-parseInt(nodeNumber/2));if(department.hasOwnProperty("children")){var html="<div id='instance_"+department.id+"' class='instanceNode' style='top:40%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+department.text+"</div></div>";$("body").append(html);var departmentOrgnize=department.children;var departmentOrgnizeLength=departmentOrgnize.length;var departmentOrgnizeLoc=leftLoc;departmentOrgnizeLocation(departmentOrgnizeLoc,departmentOrgnize,departmentOrgnizeLength); //组织定位}else{var html="<div id='instance_"+department.id+"' class='instanceNode_leaf' style='top:40%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+department.text+"</div></div>"; $("body").append(html);}}}}//组织定位function departmentOrgnizeLocation(nodeLoc,nodeArr,nodeNumber){if(nodeNumber%2==1){for(var j=0;j<nodeNumber;j++){var orgnize=nodeArr[j],leftLoc;if(j<parseInt(nodeNumber/2)){leftLoc=nodeLoc-5*(j+1);}else if(j>parseInt(nodeNumber/2)){leftLoc=nodeLoc+5*(j-parseInt(nodeNumber/2));}else{leftLoc=nodeLoc;}if(orgnize.hasOwnProperty("children")){var html="<div id='instance_"+orgnize.id+"' class='instanceNode' style='top:60%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+orgnize.text+"</div></div>";$("body").append(html);var staffArr=orgnize.children;var staffLength=staffArr.length;var staffLoc=leftLoc;staffLocation(staffLoc,staffArr,staffLength); //员⼯定位}else{var html="<div id='instance_"+orgnize.id+"' class='instanceNode_leaf' style='top:60%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+orgnize.text+"</div></div>";$("body").append(html);}}}else if(nodeNumber%2==0){for(var j=0;j<nodeNumber;j++){var orgnize=nodeArr[j],leftLoc;if(j+1<=parseInt(nodeNumber/2)){leftLoc=nodeLoc-5-5*j;}else if(j+1>parseInt(nodeNumber/2)){leftLoc=nodeLoc+5+5*(j-parseInt(nodeNumber/2));}if(orgnize.hasOwnProperty("children")){var html="<div id='instance_"+orgnize.id+"' class='instanceNode' style='top:60%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+orgnize.text+"</div></div>";$("body").append(html);var staffArr=orgnize.children;var staffLength=staffArr.length;var staffLoc=leftLoc;staffLocation(staffLoc,staffArr,staffLength); //员⼯定位}else{var html="<div id='instance_"+orgnize.id+"' class='instanceNode_leaf' style='top:60%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+orgnize.text+"</div></div>";$("body").append(html);}}}}//员⼯定位function staffLocation(nodeLoc,nodeArr,nodeNumber){if(nodeNumber%2==1){for(var j=0;j<nodeNumber;j++){var staff=nodeArr[j],leftLoc;if(j<parseInt(nodeNumber/2)){leftLoc=nodeLoc-5*(j+1);}else if(j>parseInt(nodeNumber/2)){leftLoc=nodeLoc+5*(j-parseInt(nodeNumber/2));}else{leftLoc=nodeLoc;。
详解js中构造流程图的核心技术JsPlumb
详解js中构造流程图的核⼼技术JsPlumb项⽬⾥⾯⽤到了Web⾥⾯的拖拽流程图的技术JsPlumb，其实真不算难，不过项⽬⾥⾯⽤HTML做的⼀些类似flash的效果，感觉还不错，在此分享下。
⼀、效果图展⽰1、从左边拖动元素到中间区域，然后连线2、连线类型可以⾃定义：这⾥定义为直线、折线、曲线。
实际项⽬中根据业务我们定义为分装线、分装⽀线、总装线等3、⿏标拖动区域选中元素，并且选中元素统⼀拖动位置。
4、对选中的元素左对齐。
5、对选中元素居中对齐6、右对齐7、上对齐8、垂直居中对齐9、下对齐10、根据第⼀个选中的元素上下靠拢11、根据第⼀个选中的元素左右靠拢12、根据第⼀个选中的元素同⾼13、根据第⼀个选中的元素同宽14、选中元素顺时针旋转，点击⼀次旋转45度15、选中元素逆时针旋转。
16、选中统⼀删除元素以及元素上⾯的连线这⾥很多效果其实在项⽬中作⽤并不太⼤，很多单纯就是为了展⽰⽤的。
⼆、代码详解这⾥涉及的效果⽐较多，可能要分多篇来介绍。
这篇还是来看看构造流程图的核⼼技术：JsPlumb。
1、概述关于JsPlumb的内容，在此就简单说明下吧。
jsPlumb是⼀个强⼤的JavaScript连线库，它可以将html中的元素⽤箭头、曲线、直线等连接起来，适⽤于开发Web上的图表、建模⼯具等。
它同时⽀持jQuery+jQuery UI、MooTools和YUI3这三个JavaScript框架，⼗分强⼤。
本项⽬中还是结合⼤家最熟悉的JQuery来讲解。
并且还要注意的⼀点就是JsPlumb的浏览器兼容性，JsPlumb⽀持IE 6以上、⽕狐、⾕歌等各种浏览器2、使⽤（1）引⼊JS⽂件可以直接去官⽹上⾯下载最新的js库，由于JsPlumb需要JQuery的⽀持，按照⽹上的说法，它只兼容jQuery1.3.x及以上版本，并在jQuery UI 1.7.x、1.8.x及1.9.x上测试通过。
所以我们需要下载较⾼⼀点版本的JQuery和JQuery UI。
js bignumber用法
JS BigNumber用法一、什么是JS BigNumberJavaScript是一种弱类型语言，对于大整数或大浮点数的计算并不是很友好。
在某些情况下，我们需要处理超出了JavaScript Number类型所能表示的数字。
这个时候，我们需要使用JS BigNumber。
1.1 JS BigNumber概述JS BigNumber是一个专门用于处理大数字的JavaScript库。
它允许我们处理处理任意大小的数字，而不用担心溢出问题。
JS BigNumber 库提供了丰富的方法和函数，可以方便地进行大数字的运算。
1.2 JS BigNumber的特点- 支持任意精度的整数和浮点数- 提供了丰富的数学函数- 能够处理大数运算的溢出问题二、JS BigNumber的安装和引入要使用JS BigNumber，我们首先需要安装它，并将其引入到我们的项目中。
2.1 安装JS BigNumber我们可以使用npm或者yarn来安装JS BigNumber。
在命令行中执行以下命令即可完成安装：```npm install bignumber.js```或者```yarn add bignumber.js```2.2 引入JS BigNumber在我们的JavaScript文件中，通过import或者require语句将JS BigNumber引入进来：```javascriptimport BigNumber from 'bignumber.js';```或者```javascriptconst BigNumber = require('bignumber.js');```三、JS BigNumber的基本用法JS BigNumber提供了丰富的API来处理大数字的运算。
下面是一些常见的用法举例：3.1 创建一个BigNumber实例我们可以使用BigNumber构造函数来创建一个BigNumber实例，表示一个大数字：```javascriptconst num1 = new BigNumber(xxx);const num2 = new BigNumber('xxx');```3.2 进行基本运算我们可以对两个BigNumber实例进行加、减、乘、除等基本运算：```javascriptconst sum = num1.plus(num2);const difference = num1.minus(num2);const product = num1.times(num2);const quotient = num1.dividedBy(num2);```3.3 使用数学函数JS BigNumber还提供了许多数学函数，例如平方根、对数、指数等，可以对BigNumber实例进行操作：```javascriptconst sqrt = num1.squareRoot();const log = num1.log();const exp = num1.pow(2);```3.4 格式化输出通过调用toFormat方法，我们可以格式化BigNumber实例的输出：```javascriptconsole.log(num1.toFormat(2)); // 输出：'12,345,678,901,234,567,890.00'```四、JS BigNumber的高级用法除了常见的基本运算和数学函数外，JS BigNumber还提供了一些高级用法，满足我们更复杂的需求。
jsPlumb.jsAPI阅读笔记（官方文档翻译）
jsPlumb.jsAPI阅读笔记（官⽅⽂档翻译）jsPlumb DOCS公司要开始做流程控制器，所以先调研下jsPlumb，下⽂是阅读jsPlumb提供的document所产⽣的归纳总结setup如果不使⽤jQuery或者类jQuery库，则传⼊的节点得⽤id的形式,否则jsPlumb会为元素设置⼀个id。
jsPlumb.ready(function(){···});//orjsPlumb.bind("ready",function(){···});最好确认jsPlumb加载完毕之后，再开始使⽤相关功能。
默认情况下，jsPlumb在浏览器的窗⼝中注册，为整个页⾯提供⼀个静态实例，所以也可以把它看成⼀个类，来实例化jsPlumb：var firstInstance = jsPlumb.getInstance();如果在使⽤过程中，元素的id产⽣了新的变化（多是⽣成了新的节点，旧的节点被删除了）。
则可以：jsPlumb.setId(el,newId)jsPlumb.setIdChanged(oldId,newId)在使⽤过程中，每个部分的z-index需要注意，否则连线可能会被覆盖，jsPlumb会为每个节点设置端点，⽤于定位端点。
jsPlumb也提供了拖动⽅法：var secondInstance = jsPlumb.getInstance();secondInstance.draggable("some element");重绘，每次使⽤连线时，都会导致相关联的元素重绘，但当加载⼤量数据时，可以使⽤：jsPlumb.setSuspendDrawing(true);jsPlumb.setSuspendDrawing(false,true);这⾥第⼆个参数的true，会使整个jsPlumb⽴即重绘。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
jsPlumb介绍ShenBY 沈本义(qq:1617309239)2011-11-07以下jsPlumb介绍基于jsPlubm1.3.3版本，并且基础库是用jQuery1.3.x或以上，与其他版本基础库或jsPlumb的比较或后期版本升级，本文档不做介绍。
本人英文水平有限，有疑惑请自行到官网对照翻译。
摘要Jsplumb是Jquery的一个插件，它能够让你用动态的或静态的链接来连接html界面上行的元素，并且从1.1.0版本开始，提供用鼠标拖动来链接。
目前该插件支持三个javascript 库，有Jquery、MooToos、Yui3，jsplumb代码是开源的，并且是麻省理工学院许可，由google 进行代码托管。
官方示例：/jsPlumb/html/demo.html代码地址：/p/jsplumb/Jsplumb介绍地址：/JsPlumb允许您使用SVG、Canvas 或者VML链接屏幕上的元素，这些取决于您使用的浏览器的能力。
浏览器的兼容性jsPlumb 1.3.3 已经在以下浏览器测试：IE 6 on Windows XPIE 7 on Windows XPIE 8 on Windows XPFirefox 3.5.8 on Windows XPIE 9 on Windows 7Chrome 12 on Windows 7Firefox 3.5.8 on Windows 7Firefox 3.6.3 on Ubuntu 10.04Chrome on Ubuntu 10.04Safari 4 on Mac TigerSafari 4 on Windows VistaSafari 5.0.5 on Windows 7Opera 10.54 on Windows XP一．安装1.需要导入使用jsPlumb需要到如的类库文件，是根据您使用的javascript类库的不同而定，目前提供以下版本。
jQueryjquery的1.3.x或更高版本jquery ui的1.7.x或1.8.x(如果您需要支持拖放)MooToolsMooTools核心库版本1.2.4或更高版本(jsPlumb已在1.2.4和1.3.3版本上测试)MooTools的Drag.Move的1.2.4.4或更高版本YUI3YUI3.3.X ,目前jsPlumb只在YUI3.3.0上测试，YUI3其他版本可能也可以正常工作jsPlumb可以使用SVG，HTML5的画布元素或VML去呈现需要显示的对象，现代大部分浏览器都支持Canvas 和SVG,但是IE9以下都不支持这些，默认情况下，jsPlumb都使用canvas 去渲染，但如果在使用IE9以下的情况下，jsPlumb将使用vml去渲染，您可以通过下列方式调整渲染模式：二．简介1. 基本概念jsPlumb是将所有链接的东西放在一起，所以在jsPlumb中，核心是链接对象，jsPlumb本身可以分成四个组成部分锚(Anchor)：一个位置，放置端点的地方，相对于一个元素的来源，您不需要自己硬编码来创建它，jsPlumb提供给您各种功能，您只需要按照您的需要创建它就可以了。
它没有可视化的显示，只是一个逻辑位置，可以使用锚的id来引用它，jsPlumb支持这样做，并且您可以使用坐标来表示[x,y,x方向,y方向]端点(Endpoint)：链接的一端的可视化表示，您可以创建并可以链接他们；您可以让他们支持拖拽，或者您可以直接使用jsPlumb.connect()在创建链接时直接创建它们。
连接器(Connector)：链接两个元素的线，页面的可视化表示，jsPlumb有三种默认类型:Bezier曲线，直线，和流程图链接器，您不用去处理连接器，当您需要使用它们时，您只需要定义它们即可。
覆盖物(Overlay)：一个UI组件，是用来是用来装饰连接器，例如标签、箭头等。
2.锚(Anchors)锚的概念是指：定义一个链接线能够链接的点，jsPlumb有9个默认的锚点位置，您可以使用它们去链接元素，具体有：这些位置在jsplumb底层代码中都是以阵列语法表示的，[X,Y,DX,DY],其中X,Y是在区间[0,1]指定锚的位置，DX和DY是在区间[-1,1]指定曲线的事件锚的方向坐标，例如[0，0.5，-1，0]定义了一个“LeftCenter”连接器的曲线，从锚点单向向左的曲线.同样，[0.5，0，0，-1]，定义一个“CenterTop”锚连接器所产生的向上的曲线。
3.动态锚(Dynamic Anchors)这些都是可以在若干地点之一定位的锚点，当你每次移动一个元素时，会自动选择一个最合适的位置，没有特殊的语法来创建一个DynamicAnchor，你只需要提供一个独立的锚位置，例如数组：默认的动态锚：jsPlumb提供一个动态的锚，定名为“AutoDefault”默认位置有：TopCenter，RightMiddle，BottomCenter和LeftMiddle动态锚和可拖动的连接是可以进行互操作的，当你开始拖动连接或释放它时，jsPlumb会锁定一个动态的锚的位置，您可以在界面上看到链接锚点的切换变化。
4.连接器、端点，覆盖物(Connector, Endpoint & Overlay Definitions)在我们讨论连接器、终点和覆盖物之前，需要提醒的是：你需要定义一个连接器，端点或覆盖，您必须使用一个“定义”，而不是直接构建一个，这个定义可以是一个字符串，它指定你需要创建的对象。
或者您需要构件的对象的属性名组成的数组，您可以通过其构造函数来创建，例如也有三个参数的方法，可以让你指定两套参数，jsPlumb会自动为你合并，例如5.连接器(Connectors)链接的线，实际上是界面上的各个元素的链接线，jsPlumb有三条连接器实现，一条直线、Bezier曲线和”流程图”连线，默认的连接线是贝塞尔曲线，您可以有选择的设置一个链接器，可以通过设置“connector”来定义一个连接线，或者在添加端点时设置连接线，如果您没有为connector设置一个值，那么他会用他的默认值”Default”三种链接的定义语法类似贝塞尔曲线：贝塞尔曲线提供了两个端点之间的立方体路径，它支持一个构造函数参数，curviness -可选，默认为150，这定义的锚点位于贝塞尔曲线的控制点，以像素为单位的距离，但这并不意味着你的连接器会穿过从你的曲线到这个距离的点，这仅是一个标识而已。
直线：直连绘制直线的两个端点之间。
没有构造函数的参数支持，使用参数endpointStyle定义连接样式或添加端点时定义连接线样式流程图：这种类型的连接器，绘制一系列垂直或水平段组成的连接- 经典的流程图，支持一个单一的构造函数参数存根 -这是最小长度，以像素为单位，从端点发出的初始存根。
此参数是可选的，默认为30像素6.端点类型(Endpoint Types)一个端点的UI组件，标志着一个锚的位置，是连接器连接的点，jsPlumb有三个端点实现，点、矩形和图形，你可以指定端点的属性，在jsPlumb.connect时指定属性，或者jsPlumb.Addendpiont时指定，或者设置jsPlumbde target时设定属性，语法可参照connector。
三个可用的端点类型，他们的构造函数参数如下：点端点(Dot Endpoint)：此端点在屏幕上画一个点。
它支持一个构造函数参数：半径 -可选，默认为10个像素。
定义点的半径矩形端点(Rectangle Endpoint)：绘制一个矩形。
支持的构造函数的参数是：宽度 -可选;默认为20像素。
定义矩形的宽度。
高度 -可选，默认为20个像素。
定义矩形的高度。
图片端点(Image Endpoint)：从一个给定的的URL绘制图像。
此端点支持一个构造函数的参数：SRC -必需的。
指定要使用的图像的URL。
7.覆盖物类型(Overlay Types)覆盖界面上的链接元素，如标签或箭头等，jsPlumb有四个默认值：Arrow：可配置的箭头，放在两个点的连接线上，你可以控制箭头的长度和宽度，转折点：是一个折回点，方向点(允许值是1和-1，意味着是点的链接方向) Label：在点的连接器上的可配置的标签PlainArrow：一个三角形箭头，没有折回点Diamond:顾名思义，钻石最后的两个实际上市Arrow的配置的实例，当您调用jsPlumb.connect或jsPlumb.addEndpoint时，您可以指定一个或多个覆盖物。
1.这里我们举个例子，默认的箭头，上面加上文字”foo”，如图：这个链接将有一个箭头标签在连线的一般，并且文字标签在连线的四分之一处，可以注意下id属性，你可以用它来删除标签或做其他操作。
2.下面的实例，添加两个覆盖物，请注意，我们在这个例子中使用的参数“connectorOverlays，”而不是上面例子中的“overlays”，这是因为总有一天overlays 会用来作为终结点的覆盖物样式：这个链接将有一个10*30的的箭头和含有文字foo的标签，位置在连接线的开头，另外，需要注意每一个覆盖物的id。
3.PlainArrow这仅仅是一个特殊的Arrow的实例，内部jsPlumb给”foldback”硬编码为1，意思是一个平面的箭头尾部边缘，Arror的所有构造函数适用于PlainArrow.4.Diamond这也是一个特殊的Arrow实例，其中jsPlumb内部给foldback硬编码值为2，意味着箭头转变为Diamond,Arrow的所有构造函数适用于Diamond.ble提供了一个文本的标签来装饰连接器，可用的构造函数参数有：Lable：要显示的文字，你也可用提供一个函数放这儿，用来替代文本，他是做为连接的参数返回，应该返回一个string类型的字符串；cssClass：一个可选的用于lable的样式类，这是目前首选的”lableStyle”参数，样式有：Location：做为“Arrow”标签应该显示的位置,比例从0到1，包括1。
6.显示/隐藏覆盖你可用使用setVisible来控制Arrow的显示或隐藏，或者showOverlay（ID）方法，或者hideOverlay（ID）方法，请注意这里的参数id，是我们在设定各个元素时指定的，它可用用来找到那个元素。
简单的实例：并且，连接器connection也有很方便的方法用来替代上面的方法如图：连接器connection也提供删除覆盖物的方法，如图：8.默认值(Defaults)最简单的方式来设置你的pluming的显示外观等等，是重写这些元素的默认值，如果你不这么做，你得每次都手动的去提供这些值；每一个connect和addEndpoint方法都有一个关联的默认值，这些默认值存储在jsPlumb.Defaults里面，他是一个javascript 对象，这些参数的初始值是：您可用用类似下面的方法来覆盖默认值三．链接(Connections)1.基本链接(Programmatic Connections)a.最简单的链接，你可用这样写在这个例子中，我们已经创建了“element1的”element2的“连接。