# [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新特性