# [1\. jsplumb 中文基础教程](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_1-jsplumb-%e4%b8%ad%e6%96%87%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b)
## [1.1. 什么是jsplumb？](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_11-%e4%bb%80%e4%b9%88%e6%98%afjsplumb%ef%bc%9f)
你有没有想过在你的网站上展示图表或者甚至在浏览器应用程序中使用它？用jsPlumb你可以！它是完全免费的，并根据MIT许可证提供。您可以直接从jsPlumb github网站下载框架。
该项目主要由Simon Porritt开发，他在澳大利亚西德尼担任网络开发人员。 jsPlumb由他积极开发。作为许多优秀的开发人员，他似乎更喜欢开发代码而不是编写教程，这就是为什么我提供一个简单的入门教程。
## [1.2. jsplumb能干什么？](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_12-jsplumb%e8%83%bd%e5%b9%b2%e4%bb%80%e4%b9%88%ef%bc%9f)
那么如果你应该使用它取决于你想用jsPlumb做什么。该框架适用于必须绘制图表的Web应用程序，例如类似于Visio的应用程序或工作流程设计器等。由于图表项目和连接的所有参数都是非常精细可控的，因此您可以绘制您可以想到的任何类型的图表的！
## [1.3. 基本概念](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_13-%e5%9f%ba%e6%9c%ac%e6%a6%82%e5%bf%b5)
* Souce 源节点
* Target 目标节点
* Anchor 锚点
* Endpoint 端点
* Connector 连接
# [2\. 基础demos](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_2-%e5%9f%ba%e7%a1%80demos)
## [2.1. 连接两个节点](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_21-%e8%bf%9e%e6%8e%a5%e4%b8%a4%e4%b8%aa%e8%8a%82%e7%82%b9)
demo:[https://wdd.js.org/jsplumb-chinese-tutorial/demos/01.html](https://wdd.js.org/jsplumb-chinese-tutorial/demos/01.html)
jsPlumb.ready方法和jquery的ready方法差不多的功能，jsPlumb.connect用于建立连线
~~~
<div id="diagramContainer">
<div id="item_left" class="item"></div>
<div id="item_right" class="item" style="margin-left:50px;"></div>
</div>
<script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>
<script>
/* global jsPlumb */
jsPlumb.ready(function () {
jsPlumb.connect({
source: 'item_left',
target: 'item_right',
endpoint: 'Dot'
})
})
</script>
~~~
参数说明： jsPlumb.connect(config) return connection
| 参数 | 参数类型 | 是否必须 | 说明 |
| --- | --- | --- | --- |
| source | String,Object,Endpoint | 是 | 连线源的标识，可以是id, element, 或者Endpoint |
| target | String,Object,Endpoint | 是 | 连线目标的标识，可以是id, element, 或者Endpoint |
| endpoint | String | 可选 | 端点类型，形状 |
[\>>> connect方法详情](https://jsplumbtoolkit.com/community/apidocs/classes/jsPlumbInstance.html#method_connect)
## [2.2. 可拖动节点](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_22-%e5%8f%af%e6%8b%96%e5%8a%a8%e8%8a%82%e7%82%b9)
demo:[https://wdd.js.org/jsplumb-chinese-tutorial/demos/02.html](https://wdd.js.org/jsplumb-chinese-tutorial/demos/02.html)
使用draggable可以让节点被拖动，[draggable方法参考](https://jsplumbtoolkit.com/community/apidocs/classes/jsPlumbInstance.html#method_draggable)
~~~
<div id="diagramContainer">
<div id="item_left" class="item"></div>
<div id="item_right" class="item" style="left:150px;"></div>
</div>
<script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>
<script>
/* global jsPlumb */
jsPlumb.ready(function () {
jsPlumb.connect({
source: 'item_left',
target: 'item_right',
endpoint: 'Rectangle'
})
jsPlumb.draggable('item_left')
jsPlumb.draggable('item_right')
})
</script>
~~~
## [2.3. 连接的其他参数](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_23-%e8%bf%9e%e6%8e%a5%e7%9a%84%e5%85%b6%e4%bb%96%e5%8f%82%e6%95%b0)
demo:[https://wdd.js.org/jsplumb-chinese-tutorial/demos/03.html](https://wdd.js.org/jsplumb-chinese-tutorial/demos/03.html)
可以通过connector去设置链接线的形状，如直线或者曲线之类的。anchor可以去设置锚点的位置。
jsplumb连线的样式有四种
* `Bezier`: 贝塞尔曲线
* `Flowchart`: 具有90度转折点的流程线
* `StateMachine`: 状态机
* `Straight`: 直线
~~~
<div id="diagramContainer">
<div id="item_left" class="item"></div>
<div id="item_right" class="item" style="left:150px;"></div>
</div>
<script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>
<script>
/* global jsPlumb */
jsPlumb.ready(function () {
jsPlumb.connect({
source: 'item_left',
target: 'item_right',
endpoint: 'Rectangle',
connector: ['Bezier'],
anchor: ['Left', 'Right']
})
jsPlumb.draggable('item_left')
jsPlumb.draggable('item_right')
})
</script>
~~~
## [2.4. 设置连接的默认值](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_24-%e8%ae%be%e7%bd%ae%e8%bf%9e%e6%8e%a5%e7%9a%84%e9%bb%98%e8%ae%a4%e5%80%bc)
demo:[https://wdd.js.org/jsplumb-chinese-tutorial/demos/04.html](https://wdd.js.org/jsplumb-chinese-tutorial/demos/04.html)
很多连线都是相同设置的情况下，可以将配置抽离出来，作为一个单独的变量，作为connect的第二个参数传入。实际上connect的第二个参数会和第一个参数merge，作为一个整体。
~~~
<script>
/* global jsPlumb */
jsPlumb.ready(function () {
var common = {
endpoint: 'Rectangle',
connector: ['Bezier'],
anchor: ['Left', 'Right']
}
jsPlumb.connect({
source: 'item_left',
target: 'item_right'
}, common)
jsPlumb.draggable('item_left')
jsPlumb.draggable('item_right')
})
</script>
~~~
## [2.5. 给连接加上样式](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_25-%e7%bb%99%e8%bf%9e%e6%8e%a5%e5%8a%a0%e4%b8%8a%e6%a0%b7%e5%bc%8f)
demo:[https://wdd.js.org/jsplumb-chinese-tutorial/demos/05.html](https://wdd.js.org/jsplumb-chinese-tutorial/demos/05.html)
例如给连线设置不同的颜色，设置不同的粗细之类的。
~~~
jsPlumb.connect({
source: 'item_left',
target: 'item_right',
paintStyle: { stroke: 'lightgray', strokeWidth: 3 },
endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 }
}, common)
~~~
## [2.6. 给连接加上箭头](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_26-%e7%bb%99%e8%bf%9e%e6%8e%a5%e5%8a%a0%e4%b8%8a%e7%ae%ad%e5%a4%b4)
demo:[https://wdd.js.org/jsplumb-chinese-tutorial/demos/06.html](https://wdd.js.org/jsplumb-chinese-tutorial/demos/06.html)
箭头实际上是通过设置`overlays`去设置的，可以设置箭头的长宽以及箭头的位置，location 0.5表示箭头位于中间，location 1表示箭头设置在连线末端。 一根连线是可以添加多个箭头的。
`overlays`也是一个比较重要的概念，overlays可以理解为遮罩层。遮罩层不仅仅可以设置箭头，也可以设置其他内容。
overlays有五种类型，下面给出简介。具体使用方法参见[https://jsplumbtoolkit.com/community/doc/overlays.html](https://jsplumbtoolkit.com/community/doc/overlays.html)
* `Arrow`一个可配置的箭头
* `Label`标签，可以在链接上显示文字信息
* `PlainArrow`原始类型的箭头
* `Diamond`菱形箭头
* `Custom`自定义类型
~~~
jsPlumb.connect({
source: 'item_left',
target: 'item_right',
paintStyle: { stroke: 'lightgray', strokeWidth: 3 },
endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 },
overlays: [ ['Arrow', { width: 12, length: 12, location: 0.5 }] ]
}, common)
~~~
## [2.7. 增加一个端点](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_27-%e5%a2%9e%e5%8a%a0%e4%b8%80%e4%b8%aa%e7%ab%af%e7%82%b9)
demo:[https://wdd.js.org/jsplumb-chinese-tutorial/demos/07.html](https://wdd.js.org/jsplumb-chinese-tutorial/demos/07.html)
addEndpoint方法可以用来增加端点，[具体使用请看](https://jsplumbtoolkit.com/community/apidocs/classes/jsPlumbInstance.html#method_addEndpoint)
~~~
jsPlumb.ready(function () {
jsPlumb.addEndpoint('item_left', {
anchors: ['Right']
})
})
~~~
## [2.8. 拖动创建连接](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_28-%e6%8b%96%e5%8a%a8%e5%88%9b%e5%bb%ba%e8%bf%9e%e6%8e%a5)
demo:[https://wdd.js.org/jsplumb-chinese-tutorial/demos/08.html](https://wdd.js.org/jsplumb-chinese-tutorial/demos/08.html)
如果你将`isSource`和`isTarget`设置成true，那么久可以用户在拖动时，自动创建链接。
~~~
jsPlumb.ready(function () {
jsPlumb.setContainer('diagramContainer')
var common = {
isSource: true,
isTarget: true,
connector: ['Straight']
}
jsPlumb.addEndpoint('item_left', {
anchors: ['Right']
}, common)
jsPlumb.addEndpoint('item_right', {
anchor: 'Left'
}, common)
jsPlumb.addEndpoint('item_right', {
anchor: 'Right'
}, common)
})
~~~
`一般来说拖动创建的链接，可以再次拖动，让链接断开。如果不想触发这种行为，可以设置。`
~~~
jsPlumb.importDefaults({
ConnectionsDetachable: false
})
~~~
## [2.9. 给端点增加样式](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_29-%e7%bb%99%e7%ab%af%e7%82%b9%e5%a2%9e%e5%8a%a0%e6%a0%b7%e5%bc%8f)
demo:[https://wdd.js.org/jsplumb-chinese-tutorial/demos/09.html](https://wdd.js.org/jsplumb-chinese-tutorial/demos/09.html)
通过设置各种`*Style`来改变链接或者端点的样式。
~~~
jsPlumb.ready(function () {
jsPlumb.setContainer('diagramContainer')
var common = {
isSource: true,
isTarget: true,
connector: 'Straight',
endpoint: 'Dot',
paintStyle: {
fill: 'white',
outlineStroke: 'blue',
strokeWidth: 3
},
hoverPaintStyle: {
outlineStroke: 'lightblue'
},
connectorStyle: {
outlineStroke: 'green',
strokeWidth: 1
},
connectorHoverStyle: {
strokeWidth: 2
}
}
jsPlumb.addEndpoint('item_left', {
anchors: ['Right']
}, common)
jsPlumb.addEndpoint('item_right', {
anchor: 'Left'
}, common)
jsPlumb.addEndpoint('item_right', {
anchor: 'Right'
}, common)
})
~~~
## [2.10. 节点改变尺寸](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_210-%e8%8a%82%e7%82%b9%e6%94%b9%e5%8f%98%e5%b0%ba%e5%af%b8)
demo:[https://wdd.js.org/jsplumb-chinese-tutorial/demos/10.html](https://wdd.js.org/jsplumb-chinese-tutorial/demos/10.html)
jsplumb实际上不支持改变节点大小，实际上只能通过jquery ui resizable 方法去改变。
~~~
<div id="diagramContainer">
<div id="item_left" class="item"></div>
<div id="item_right" class="item" style="left:150px;"></div>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="./lib/jquery.jsplumb.js"></script>
<script>
/* global jsPlumb, $ */
$('.item').resizable({
resize: function (event, ui) {
jsPlumb.repaint(ui.helper)
}
})
jsPlumb.ready(function () {
jsPlumb.connect({
source: 'item_left',
target: 'item_right',
endpoint: 'Rectangle'
})
jsPlumb.draggable('item_left')
jsPlumb.draggable('item_right')
})
</script>
~~~
## [2.11. 限制节点拖动区域](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_211-%e9%99%90%e5%88%b6%e8%8a%82%e7%82%b9%e6%8b%96%e5%8a%a8%e5%8c%ba%e5%9f%9f)
demo:[https://wdd.js.org/jsplumb-chinese-tutorial/demos/11.html](https://wdd.js.org/jsplumb-chinese-tutorial/demos/11.html)
默认情况下，节点可以被拖动到区域外边，如果想只能在区域内拖动，需要设置containment，这样节点只能在固定区域内移动。
~~~
jsPlumb.setContainer('area-id')
~~~
## [2.12. 节点网格对齐](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_212-%e8%8a%82%e7%82%b9%e7%bd%91%e6%a0%bc%e5%af%b9%e9%bd%90)
demo:[https://wdd.js.org/jsplumb-chinese-tutorial/demos/12.html](https://wdd.js.org/jsplumb-chinese-tutorial/demos/12.html)网格对齐实际上是设置了`grid`属性，使移动只能按照固定的尺寸移动。然后用一张图作为背景铺开作为网格来实现的。
~~~
#diagramContainer {
padding: 20px;
width: 80%;
height: 400px;
border: 1px solid gray;
background-image: url(http://p3alsaatj.bkt.clouddn.com/20180227163310_1bVYeW_grid.jpeg);
background-repeat: repeat;
}
jsPlumb.draggable('item_left', {
containment: 'parent',
grid: [10, 10]
})
~~~
## [2.13. 给链接添加点击事件：点击删除连线](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_213-%e7%bb%99%e9%93%be%e6%8e%a5%e6%b7%bb%e5%8a%a0%e7%82%b9%e5%87%bb%e4%ba%8b%e4%bb%b6%ef%bc%9a%e7%82%b9%e5%87%bb%e5%88%a0%e9%99%a4%e8%bf%9e%e7%ba%bf)
demo:[https://wdd.js.org/jsplumb-chinese-tutorial/demos/13.html](https://wdd.js.org/jsplumb-chinese-tutorial/demos/13.html)
~~~
// 请单点击一下连接线,
jsPlumb.bind('click', function (conn, originalEvent) {
if (window.prompt('确定删除所点击的链接吗？ 输入1确定') === '1') {
jsPlumb.detach(conn)
}
})
~~~
jsPlumb支持许多事件
`jsPlumb Events列表`
* connection
* connectionDetached
* connectionMoved
* click
* dblclick
* endpointClick
* endpointDblClick
* contextmenu
* beforeDrop
* beforeDetach
* zoom
* Connection Events
* Endpoint Events
* Overlay Events
* Unbinding Events
参考用法参考：[https://jsplumbtoolkit.com/community/doc/events.html#jsPlumbEvents](https://jsplumbtoolkit.com/community/doc/events.html#jsPlumbEvents)
## [2.14. 删除节点，包括节点相关的连接](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_214-%e5%88%a0%e9%99%a4%e8%8a%82%e7%82%b9%ef%bc%8c%e5%8c%85%e6%8b%ac%e8%8a%82%e7%82%b9%e7%9b%b8%e5%85%b3%e7%9a%84%e8%bf%9e%e6%8e%a5)
demo:[https://wdd.js.org/jsplumb-chinese-tutorial/demos/14.html](https://wdd.js.org/jsplumb-chinese-tutorial/demos/14.html)
~~~
// nodeId为节点id, remove方法可以删除节点以及和节点相关的连线
console.log('3 秒后移除左边节点包括它的连线')
setTimeout(function () {
jsPlumb.remove('item_left')
}, 3000)
~~~
注意remove方法有些情况下是无法删除干净连线的，[详情](https://jsplumbtoolkit.com/community/doc/removing.html)
## [2.15. 通过编码连接endPoint](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_215-%e9%80%9a%e8%bf%87%e7%bc%96%e7%a0%81%e8%bf%9e%e6%8e%a5endpoint)
demo:[https://wdd.js.org/jsplumb-chinese-tutorial/demos/15.html](https://wdd.js.org/jsplumb-chinese-tutorial/demos/15.html)
初始化数据后，给节点加上了endPoint, 如果想编码让endPoint链接上。需要在addEndpoint时，就给该断点加上一个uuid, 然后通过connect()方法，将两个断点链接上。建议使用[node-uuid](https://github.com/kelektiv/node-uuid)给每个断点都加上唯一的uuid， 这样以后链接就方便多了。
~~~
jsPlumb.addEndpoint('item_left', {
anchors: ['Right'],
uuid: 'fromId'
})
jsPlumb.addEndpoint('item_right', {
anchors: ['Left'],
uuid: 'toId'
})
console.log('3 秒后建立连线')
setTimeout(function () {
jsPlumb.connect({ uuids: ['fromId', 'toId'] })
}, 3000)
~~~
## [2.16. 连接前的检查，判断是否建立连接](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_216-%e8%bf%9e%e6%8e%a5%e5%89%8d%e7%9a%84%e6%a3%80%e6%9f%a5%ef%bc%8c%e5%88%a4%e6%96%ad%e6%98%af%e5%90%a6%e5%bb%ba%e7%ab%8b%e8%bf%9e%e6%8e%a5)
demo:[https://wdd.js.org/jsplumb-chinese-tutorial/demos/16.html](https://wdd.js.org/jsplumb-chinese-tutorial/demos/16.html)
有时候当用户从A端点链接到B端点时，需要做一些检查，如果不符合条件，就不让链接建立。
~~~
// 当链接建立前
jsPlumb.bind('beforeDrop', function (info) {
var a = 10
var b = 2
if (a < b) {
console.log('链接会自动建立')
return true // 链接会自动建立
} else {
console.log('链接取消')
return false // 链接不会建立，注意，必须是false
}
})
~~~
## [2.17. 一个端点如何拖拽出多条连线](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_217-%e4%b8%80%e4%b8%aa%e7%ab%af%e7%82%b9%e5%a6%82%e4%bd%95%e6%8b%96%e6%8b%bd%e5%87%ba%e5%a4%9a%e6%9d%a1%e8%bf%9e%e7%ba%bf)
默认情况下，`maxConnections`的值是1，也就是一个端点最多只能拉出一条连线。
你也可以设置成其他值，例如5，表示最多可以有5条连线。
如果你想不限制连线的数量，那么可以将该值设置为`-1`
~~~
var common = {
isSource: true,
isTarget: true,
connector: ['Straight'],
maxConnections: -1
}
jsPlumb.addEndpoint('item_left', {
anchors: ['Right']
}, common)
~~~
## [2.18. 整个节点作为source或者target](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_218-%e6%95%b4%e4%b8%aa%e8%8a%82%e7%82%b9%e4%bd%9c%e4%b8%basource%e6%88%96%e8%80%85target)
demo:[https://wdd.js.org/jsplumb-chinese-tutorial/demos/18.html](https://wdd.js.org/jsplumb-chinese-tutorial/demos/18.html)
整个节点作为source或者target， 并且将锚点设置成Continuous，那么锚点就会随着节点的位置改变而改变自己的位置。
jsPlumb的锚点分为四类
* `Static`静态 固定位置的锚点
* `Dynamic`jsPlumb自动选择合适的锚点，动态锚点
* `Perimeter`边缘锚点，会根据节点形状去改变位置
* `Continuous`根据节点位置，自动调整位置的锚点
详情：[https://jsplumbtoolkit.com/community/doc/anchors.html](https://jsplumbtoolkit.com/community/doc/anchors.html)
~~~
window.jsPlumb.ready(function () {
var jsPlumb = window.jsPlumb
jsPlumb.makeSource('A', {
endpoint:"Dot",
anchor: "Continuous"
})
jsPlumb.makeTarget('B', {
endpoint:"Dot",
anchor: "Continuous"
})
jsPlumb.draggable('A')
jsPlumb.draggable('B')
})
~~~
## [2.19. 节点缩放](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_219-%e8%8a%82%e7%82%b9%e7%bc%a9%e6%94%be)
demo:[https://wdd.js.org/jsplumb-chinese-tutorial/demos/19.html](https://wdd.js.org/jsplumb-chinese-tutorial/demos/19.html)
~~~
window.jsPlumb.ready(function () {
var jsPlumb = window.jsPlumb
jsPlumb.setContainer("diagramContainer")
jsPlumb.connect({
source: 'A',
target: 'B',
endpoint: 'Dot'
})
var baseZoom = 1
setInterval(() => {
baseZoom -= 0.1
if (baseZoom < 0.5) {
baseZoom = 1
}
zoom(baseZoom)
}, 1000)
})
function zoom (scale) {
$("#diagramContainer").css({
"-webkit-transform": `scale(${scale})`,
"-moz-transform": `scale(${scale})`,
"-ms-transform": `scale(${scale})`,
"-o-transform": `scale(${scale})`,
"transform": `scale(${scale})`
})
jsPlumb.setZoom(0.75);
}
~~~
# [3\. jsPlumb默认配置简介](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_3-jsplumb%e9%bb%98%e8%ae%a4%e9%85%8d%e7%bd%ae%e7%ae%80%e4%bb%8b)
参考地址:[https://jsplumbtoolkit.com/community/doc/defaults.html](https://jsplumbtoolkit.com/community/doc/defaults.html)
jsPlumb的配置项有很多，如果你不主动去设置，那么jsPlumb就使用默认的配置。
另外建议你不要修改默认的配置，而是使用自定义的方式。
另外一点要注意，如果你想修改默认配置，那么使用importDefaults方法，并且属性的首字母要大写。如果你用addEndpoint, 并使用类似maxConnections的属性，那么首字母要小写。
参见demo:[https://wdd.js.org/jsplumb-chinese-tutorial/demos/17.html](https://wdd.js.org/jsplumb-chinese-tutorial/demos/17.html)demo上需要你自己手动拖动创建链接。
~~~
var common = {
isSource: true,
isTarget: true,
connector: ['Straight'],
maxConnections: -1
}
jsPlumb.addEndpoint('item_left', {
anchors: ['Right']
}, common)
~~~
~~~
Anchor : "BottomCenter",
Anchors : [ null, null ],
ConnectionsDetachable : true,
ConnectionOverlays : [],
Connector : "Bezier",
Container : null,
DoNotThrowErrors : false,
DragOptions : { },
DropOptions : { },
Endpoint : "Dot",
Endpoints : [ null, null ],
EndpointOverlays : [ ],
EndpointStyle : { fill : "#456" },
EndpointStyles : [ null, null ],
EndpointHoverStyle : null,
EndpointHoverStyles : [ null, null ],
HoverPaintStyle : null,
LabelStyle : { color : "black" },
LogEnabled : false,
Overlays : [ ],
MaxConnections : 1,
PaintStyle : { strokeWidth : 8, stroke : "#456" },
ReattachConnections : false,
RenderMode : "svg",
Scope : "jsPlumb_DefaultScope"
~~~
你也可以从`jsPlumb.Defaults`对象中查看默认的配置。如果你想要更加个性化的设置连线，那么最好可以了解一下，它的默认设置有哪些，从而方便的来完成自己的设计需求。
默认参数的简介:
* `Anchor`锚点，即端点链接的位置
* `Anchors`多个锚点 \[源锚点，目标锚点\].
* `Connector`链接
* `ConnectionsDetachable`节点是否可以用鼠标拖动使其断开，默认为true。即用鼠标链接上的连线，也可以使用鼠标拖动让其断开。设置成false，可以让其拖动也不会自动断开。
* `Container`连线的容器
* `DoNotThrowErrors`是否抛出错误
* `ConnectionOverlays`链接遮罩层
* `DragOptions`拖动设置
* `DropOptions`拖放设置
* `Endpoint`端点
* `Endpoints`数组形式的，\[源端点，目标端点\]
* `EndpointOverlays`端点遮罩层
* `EndpointStyle`端点样式
* `EndpointStyles`\[源端点样式，目标端点样式\]
* `EndpointHoverStyle`端点鼠标经过的样式
* `EndpointHoverStyles`\[源端点鼠标经过样式，目标端点鼠标经过样式\]
* `HoverPaintStyle`鼠标经过链接线时的样式
* `LabelStyle`标签样式
* `LogEnabled`是否启用日志
* `Overlays`连接线和端点的遮罩层样式
* `MaxConnections`端点最大连接线数量默认为1， 设置成-1可以表示无数个链接
* `PaintStyle`连线样式
* `ReattachConnections`端点是否可以再次重新链接
* `RenderMode`渲染模式，默认是svg
* `Scope`作用域，用来区分哪些端点可以链接，作用域相同的可以链接
~~~
// 可以使用importDefaults，来重写某些默认设置
jsPlumb.importDefaults({
PaintStyle : {
strokeWidth:13,
stroke: 'rgba(200,0,0,0.5)'
},
DragOptions : { cursor: "crosshair" },
Endpoints : [ [ "Dot", { radius:7 } ], [ "Dot", { radius:11 } ] ],
EndpointStyles : [{ fill:"#225588" }, { fill:"#558822" }]
});
~~~
# [4\. 有没有稍微复杂一点，带有拖放的栗子？](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_4-%e6%9c%89%e6%b2%a1%e6%9c%89%e7%a8%8d%e5%be%ae%e5%a4%8d%e6%9d%82%e4%b8%80%e7%82%b9%ef%bc%8c%e5%b8%a6%e6%9c%89%e6%8b%96%e6%94%be%e7%9a%84%e6%a0%97%e5%ad%90%ef%bc%9f)
项目地址：[https://github.com/wangduanduan/visual-ivr](https://github.com/wangduanduan/visual-ivr)，将views目录下的drag-drop-demo.html拖放到浏览器中，就可以愉快的玩耍了。
从该demo中除了可以学到基本的jsplumb的api, 也可以学到其他的关于拖放的知识点。其中目前只做了语音节点的拖放，其他的还时间做。该demo没有使用webpack打包，代码写的有点乱，大家凑合着看，有问题可以提issue, 或者评论。
# [5\. 实战项目 一个可视化IVR编辑器](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_5-%e5%ae%9e%e6%88%98%e9%a1%b9%e7%9b%ae-%e4%b8%80%e4%b8%aa%e5%8f%af%e8%a7%86%e5%8c%96ivr%e7%bc%96%e8%be%91%e5%99%a8)
项目地址：[https://github.com/wangduanduan/visual-ivr](https://github.com/wangduanduan/visual-ivr)该项目还在开发完善中，不过已经具备基本功能。
该项目是用webpack打包的项目，所有文件都在src目录下。
图1是基于jsplumb做的最基础的版本，图2是最近优化后的版本，该版本未开源。
【图1】
【图2】
# [6\. 还有哪些类似的图形连线可视化项目](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_6-%e8%bf%98%e6%9c%89%e5%93%aa%e4%ba%9b%e7%b1%bb%e4%bc%bc%e7%9a%84%e5%9b%be%e5%bd%a2%e8%bf%9e%e7%ba%bf%e5%8f%af%e8%a7%86%e5%8c%96%e9%a1%b9%e7%9b%ae)
## [6.1. G6 AntV](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_61-g6-antv)
[https://github.com/antvis/g6](https://github.com/antvis/g6)
## [6.2. VivaGraphJS](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_62-vivagraphjs)
[https://github.com/anvaka/VivaGraphJS](https://github.com/anvaka/VivaGraphJS)
## [6.3. springy](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_63-springy)
[https://github.com/dhotson/springy](https://github.com/dhotson/springy)
## [6.4. graphviz](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_64-graphviz)
[https://www.graphviz.org/about/](https://www.graphviz.org/about/)
中文有个基本的介绍文档写的不错，参考：[https://casatwy.com/shi-yong-dotyu-yan-he-graphvizhui-tu-fan-yi.html](https://casatwy.com/shi-yong-dotyu-yan-he-graphvizhui-tu-fan-yi.html)
graphviz可以把你写的.dot文件渲染成一张图。
mac上首先要安装：`brew install graphviz`
然后如果你用vscode的话，vscode上又graphviz的扩展插件，可以预览你的dot文件。
总体来说，graphviz的功能十分强大，同时它也提供了其他语言的脚本api来方便绘图。总之，如果你不想通过拖拉拽来绘制一些流程图，又对图形布局不是很感兴趣的话，`graphviz是一个免费而且效率高而且能装逼的工具`
再贴几张graphviz的绘图
## [6.5. visjs](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_65-visjs)
[http://visjs.org/index.html](http://visjs.org/index.html)
该项目看起来不错，github上将近有7000 star, 但是它的开发者似乎没时间维护该项目了，正在给该项目找下家。
# [7\. 参考资源](https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_7-%e5%8f%82%e8%80%83%e8%b5%84%e6%ba%90)
* [jsPlumb Class](https://jsplumbtoolkit.com/community/apidocs/classes/jsPlumb.html)
* [freedevelopertutorials jsplumb-tutorial](http://www.freedevelopertutorials.com/jsplumb-tutorial/)
- vue简介
- 基础项目
- 点赞
- 综合应用（从豆瓣上取数据，渲染到html中）
- 父组件向子组件传参
- 零碎知识点
- vue渲染数据（for、url 、{{}}）
- 跳转页面传参
- 路由
- 更改端口
- 计算函数
- vue事件整理
- 整理1
- vue指令整理
- vue生命周期
- 格式
- 元素事件
- v-text和v-html
- vue 安装及打包
- 前端ui组件、ui框架整合
- vue移动端ui之Vant
- 1. 环境配置
- 2.上拉刷新list
- 第一章 起步
- 第1节 开发环境配置
- 第2节 新建页面
- 第3节 页面跳转
- 第4节 跳转页面传参
- 第5节 使用组件
- 第6节 跨域取数据
- 第7节 不跨域使用原生axios
- 第二章 进阶
- 第1节 封装http
- 1. 封装跨域的http
- 2. 不跨域的http
- 第2节 v-for，v-if，事件绑定
- 第3节 豆瓣综合运用（组件传参）
- 1. 子组件向父组件传参
- 2.父组件向子组件传参
- 3. 综合运用
- 第三章 vue动画
- 1. 鼠标滚动渐隐渐现、iconfont 在vue中的使用
- 2.鼠标 点击 渐隐渐现实例
- 3. vue-TosoList
- 第四章 项目实践
- 第1节 开发环境配置
- 1.vue-rem实现配置
- 使用vw配置
- 2. 样式重置,fastclick,border.css的配置
- 3. 引入iconfont
- 4. 模板文件
- 第2节 轮播
- 1. 轮播实现
- 设置swiperList
- 第3节 exclude
- 第4节 使用插槽实现渐隐渐现
- 第5节 引用外部样式scss
- 第6节 递归组件
- 第7节 解决进入页面不是在顶部
- 第8节 异步组件
- 第9节 简化路径
- 第10节 better-scroll
- 第11节 兄弟组件之间联动（传参）
- 第12节 在vuex中设置缓存
- 第13节.页面局部刷新
- 第五章 Vuex
- 第1节 介绍
- 第2节 组件之间传参
- 2.1
- 第3节 封装vuex
- 第六章 weex
- 第1节 weex开发环境配置
- 1.1JDK、SDK配置
- 第2节 使用
- 第七章 前端UI库之
- 第1节 ant-design-vue 的安装 创建
- 第二节 iview的使用
- 第八章 mpvue
- 第1节 安装
- 第九章 Vue中使用饿了么UI
- 1. 踩坑1
- 2. 踩坑2
- 3.知识点整理
- 第十章 其他整理
- 1. this.$的使用
- 2. token配合js-coke插件使用
- 1. token介绍
- 2.使用
- 3. 使用自带api
- 4. 全局引用组件
- 5. vue中的好东西
- 1. http请求
- 2. vuex
- 1. 项目中的使用1
- 2. 项目中使用（大型项目）
- 3. Object.freeze()
- 4. watch的使用
- 5. 全局通用参数配置appConfig
- 6. vue篇之事件总线（EventBus）
- 7. 分析路由配置项router
- 8. 路由权限配置
- 9. 全局配置信息，放置在store中进行使用
- 父子组件之间通信
- 使用Vue.observable()进行状态管理
- 7. 项目工程化管理
- 1. 项目中的.env.development和.env.production文件是啥
- 2. 项目中的vuese.config.js是什么
- 3. commitlint控制规范信息
- 4. vue使用vue-awesome-swiper实现轮播
- 4. 项目代码格式化校验
- 8. vue中mixins的使用
- 知识点
- 1. 重置data中的数据
- 2.解构赋值
- 3.小数相加
- 4. 数字三位加点
- 表格边框
- keep-alive
- fancyBox3图片预览
- 还原data数据
- slot嵌套使用
- vue父子组件的什么周期
- 滚动条样式调整
- 开发问题
- 第十一 通用公共模块
- 通用方法整理
- 递归
- forEach跳出循环
- 通用组件整理
- 模态框
- 知识整理
- 组件
- 竖直导航栏
- 导航知识整理
- 导航栏组件
- index.js
- render.js
- ErsMenu.vue
- 按钮
- 按钮
- icon组件
- icon知识整理
- 组件内容
- 第十二章 插件整理
- 1. perfect-scrollbar滚动条
- 1.1 项目中使用
- 2. jszip文件夹打包上传
- 3. jsPlumb实现流程图
- 4. ztree实现树结构
- 5. better-scroll 手机上滑下滑
- 6. vue-awesome-swiper 轮播
- 7. js-cookie
- 8. v-viewer图片查看器
- 9. Photoswipe 图片查看插件
- 开发流程整理
- vue源码学习篇
- vue2.x
- 源码debugger调试
- 响应式原理
- vue3.x
- 源码调试
- 新响应式原理
- vue3.0新特性