在我們的開發工程中經常會使用到各種圖，所謂的圖就是由節點和節點之間的連接所形成的系統，數學上專門有一個分支叫圖論（Graph Theroy）。利用圖我們可以做很多工具，比如思維導圖，流程圖，狀態機，組織架構圖，等等。今天我要做的是用開源的HTML5工具來快速構造一個做圖的工具。

工具選擇

工預善其事，必先利其器。第一件事是選擇一件合適的工具，開源時代，程序員還是很幸福的，選擇很多。

• flowchart.js http://adrai.github.io/flowchart.js/ , 基於SVG創建Flow Chart
• go.js http://www.gojs.net/latest/index.html go.js 提供一整套的JS工具 ，支持各種交互式圖表的創建。有免費版和收費版
• joint.js http://www.jointjs.com/ joint.js 是另一個創建圖標庫的工具，也提供免費版和商業版
• jsPlumb http://www.jsplumb.org/ jsPlumb是一套開源的流程圖創建工具 ，小巧精悍，使用簡單
• d3 http://d3js.org 在html5領域，d3可謂是最好的可視化基礎庫，提供方面的DOM操作，非常強大。

最終，我選擇了jsPlumb，因為它完全開源，使用很簡單，用D3的話可能會多花很多功夫。joint.js也不錯。大家可以根據自己的需要選擇。

構建靜態應用

下面我們一步一步的來使用jsPlumb來創建我們的流程圖工具。

第一步是等待DOM和jsPlumb初始化完畢，類似document.ready()和jquery.ready(), 要使用jsPlumb, 需要把代碼放在這個函數里：

jsPlumb.ready(function(){
//...yourcodegoeshere...
}

創建一個jsPlumb的實例，並初始化jsPlumb的配置參數：

//InitializeJsPlumb
varcolor="#E8C870";
varinstance=jsPlumb.getInstance({
//noticethe'curviness'argumenttothisBeziercurve.thecurvesonthispagearefarsmoother
//thanthecurvesonthefirstdemo,whichusethedefaultcurvinessvalue.
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來實現。我這裡提供了一個函數來創建節點。

functionaddNode(parentId,nodeId,nodeLable,position){
varpanel=d3.select("#"+parentId);
panel.append('div').style('width','120px').style('height','50px')
.style('position','absolute')
.style('top',position.y).style('left',position.x)
.style('border','2px#9DFFCAsolid').attr('align','center') 

.attr('id',nodeId).classed('node',true)
.text(nodeLable);

returnjsPlumb.getSelector('#'+nodeId)[0];
}

這裡做的事情就是創建了一個DIV元素，並放在對應的容器的制定位置上，注意為了支持拖拽的功能，必須使用position:absolute 。

我使用D3來操作DOM，大家可能會更習慣JQuery，這純屬個人喜好的問題。

最後返回創建節點的實例引用，這是的selector使用了jsPlumb.getSelector()方法，它和JQuery的selector是一樣的，這樣用的好處是你可以使用不同的DOM操作庫，例如Vanilla

下面我使用一個函數來創建端點/錨點（anchor），錨點就是節點上的連接點，用於連接不同的節點。

functionaddPorts(instance,node,ports,type){
//Assumehorizentallayout
varnumber_of_ports=ports.length;
vari=0;
varheight=$(node).height();//Note,jquerydoesnotincludeborderforheight
vary_offset=1/(number_of_ports+1);
vary=0;

for(;i<number>varanchor=[0,0,0,0];
varpaintStyle={radius:5,fillStyle:'#FF8891'};
varisSource=false,isTarget=false;
if(type==='output'){
anchor[0]=1;
paintStyle.fillStyle='#D4FFD6';
isSource=true;
}else{
isTarget=true; 

}

anchor[1]=y+y_offset;
y=anchor[1];

instance.addEndpoint(node,{
uuid:node.getAttribute("id")+"-"+ports[i],
paintStyle:paintStyle,
anchor:anchor,
maxConnections:-1,
isSource:isSource,
isTarget:isTarget
});
}
}/<number>

instance是jsPlumb的實例

node是我們用addNode方法創建的Node實例

ports，是一個string的數組，指定端點的個數和名字

type，可能是output或者input，指定端點的種類，一個節點的輸出端口可以連接另一個節點的輸入端口。

這裡anchor是一個四維數組，0維和1維分別是錨點在節點x軸和y軸的偏移百分比。我這裡希望把端口畫在節點的左右兩側，並按照端口的數量均勻分佈。

最後使用instance.addEndpoint來創建端點。注意這裡只要指定isSource和isTarget就可以用drag&drop的方式來連接端點，非常方便。

下面一步我們提供一個函數來連接端點：

functionconnectPorts(instance,node1,port1,node2,port2){
//declaresomecommonvalues:
varcolor="gray";
vararrowCommon={foldback:0.8,fillStyle:color,width:5},
//usethree-argspectocreatetwodifferentarrowswiththecommonvalues:
overlays=[
["Arrow",{location:0.8},arrowCommon],
["Arrow",{location:0.2,direction:-1},arrowCommon]
];

varuuid_source=node1.getAttribute("id")+"-"+port1;
varuuid_target=node2.getAttribute("id")+"-"+port2;

instance.connect({uuids:[uuid_source,uuid_target]});
}

node1和node2是源節點和目標節點的引用，port1和port2是源端口和目標端口的名字。

使用instance.connect方法來創建連接。 overlays用來添加連接線的箭頭效果或者其他風格，我這裡沒有使用，因為覺得都不是很好看。大家如果要用，只要把overlays加入到instance.connect的方法參數就可以了。

調用以上方法來創建節點，端點和連接線。

varnode1=addNode('container-id','node1','node1',{x:'80px',y:'20px'});
varnode2=addNode('container-id','node2','node2',{x:'280px',y:'20px'});

addPorts(instance,node1,['out1','out2'],'output');
addPorts(instance,node2,['in','in1','in2'],'input');

connectPorts(instance,node1,'out2',node2,'in');

這裡我們創建了兩個節點，第一個節點有兩個輸出端口，第二個節點有三個輸入端口，然後把第一個節點的out2端口連接到第二個端點的in端口。效果如下：

最後我們給節點增加drag&drop的功能，這樣我們就可以拖動這些節點來改變圖的佈局了。

instance.draggable($('.node'));

這裡似乎依賴於JQuery-UI,我還不是很清楚。

交互式創建節點

我們已經初步具有了創建圖的功能，可是節點的創建必須通過程序，我們希望用交互的方式來創建節點。

通常我們希望有一個tree view的控件，讓後通過拖拽來創建對應類型的節點。這裡我使用了這個開源的tree view，基於bootstrap https://github.com/jonmiles/bootstrap-treeview

我們先創建一個tree view：

functiongetTreeData(){
vartree=[
{
text:"Nodes",
nodes:[
{
text:"Node1",
},
{
text:"Node2"
}
]
}
];

returntree; 

}
//InitializeControlTreeView
$('#control-panel').treeview({data:getTreeData()});

樹上有兩個節點:

然後我實現從樹上拖拽對應的節點，到流程圖上的邏輯。

//Handledraganddrop
$('.list-group-item').attr('draggable','true').on('dragstart',function(ev){
//ev.dataTransfer.setData("text",ev.target.id);
ev.originalEvent.dataTransfer.setData('text',ev.target.textContent);
console.log('dragstart');
});

$('#container-id').on('drop',function(ev){
//avoideventconlictforjsPlumb
if(ev.target.className.indexOf('_jsPlumb')>=0){
return;
}

ev.preventDefault();
varmx=''+ev.originalEvent.offsetX+'px';
varmy=''+ev.originalEvent.offsetY+'px';

console.log('ondrop:'+ev.originalEvent.dataTransfer.getData('text'));
varuid=newDate().getTime();
varnode=addNode('flow-panel','node'+uid,'node',{x:mx,y:my});
addPorts(instance,node,['out'],'output');
addPorts(instance,node,['in1','in2'],'input');
instance.draggable($(node));
}).on('dragover',function(ev){
ev.preventDefault();
console.log('ondragover');
});

這裡要注意的是要避免和jsPlumb拖拽端點的邏輯衝突，當檢測到target是jsPlumb對象是需要直接從drop方法中退出以執行對應的jsPlumb的drop邏輯。

好了，一個繪製流程圖的軟件工具初步完工。

我把代碼放在oschina的代碼託管服務上了， 大家有興趣可以去試試。

閱讀更多 聞數起舞 的文章

關鍵字: HTML5 可視化技術 圖論