超級好用的流程圖js框架
在我們的開發工程中經常會使用到各種圖，所謂的圖就是由節點和節點之間的連線所形成的系統，數學上專門有一個分支叫圖論（Graph Theroy）。利用圖我們可以做很多工具，比如思維導圖，流程圖，狀態機，組織架構圖，等等。今天我要做的是用開源的HTML5工具來快速構造一個做圖的工具。
工具選擇
預先善其事，必先利其器。第一件事是選擇一件合適的工具，開源時代，程式設計師還是很幸福的，選擇很多。
最終，我選擇了jsPlumb，因為它完全開源，使用很簡單，用D3的話可能會多花很多功夫。joint.js也不錯。大家可以根據自己的需要選擇。
構建靜態應用
下面我們一步一步的來使用jsPlumb來建立我們的流程圖工具。
第一步是等待DOM和jsPlumb初始化完畢，類似document.ready()和jquery.ready(), 要使用jsPlumb, 需要把程式碼放在這個函式裡：
| 1 2 3 |
jsPlumb.ready(function()
{
//
... your code goes here ...
}
|
建立一個jsPlumb的例項，並初始化jsPlumb的配置引數：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
//Initialize
JsPlumb
var color
= "#E8C870";
var instance
= jsPlumb.getInstance({
//
notice the 'curviness' argument to this Bezier curve. the curves on this page are far smoother
//
than the curves on the first demo, which use the default curviness value.
Connector
: [ "Bezier",
{ curviness:50 } ],
DragOptions
: { cursor: "pointer",
zIndex:2000 },
PaintStyle
: { strokeStyle:color, lineWidth:2 },
EndpointStyle
: { radius:5, fillStyle:color },
HoverPaintStyle
: {strokeStyle:"#7073EB" },
EndpointHoverStyle
: {fillStyle:"#7073EB" },
Container:"container-id"
});
|
這裡給給出了一些配置包括，連線線（這裡配置了一個貝塞爾曲線），線的風格，連線點得風格。Container需要配置一個對應的DIV容器的id。（這裡也可以使用setContainer的方法）
下面我們要建立一個節點（node），每一個節點可以用一個DIV來實現。我這裡提供了一個函式來建立節點。
| 1 2 3 4 5 6 7 8 9 10 11 |
function addNode(parentId,
nodeId, nodeLable, position) {
var panel
= d3.select("#" +
parentId);
panel.append('div').style('width','120px').style(
|