最近項目上需要用流程圖來做問題定界分析，之前有同事用jsPlumb做過，但是閱讀代碼後覺得比較麻煩，所以自己又找了一圈，找到一個叫Dagre-D3的開源類庫，畫出來的效果如下圖，Dagre-D3最大的優點就是可以實現自動佈局，你只需要put數據就可以了，但是缺點就是自動佈局後的連線會比較亂，而且連線不是橫平豎直的，對於流程圖不復雜的還好，稍微複雜點畫出來的連線就沒法看。最後還是被pass了。
jsPlumb地址：https://jsplumbtoolkit.com
Dagre-D3 Git地址：https://github.com/cpettitt/dagre-d3
後面經過一番百度，最終決定用JointJS，官網：www.jointjs.com，相比Dagre-D3和jsPlumb，JointJS的API很詳細，代碼量少，連接線有多種選擇，封裝了多種常用的形狀，而且能畫的圖很多，官方也給了一些demo可以參考。下面是我用JointJS畫出來的流程圖：
依賴：在官網的下載頁面都能找到
<link rel="stylesheet" type="text/css" href="joint.css" /> <script src="jquery.min.js"></script> <script src="lodash.min.js"></script> <script src="backbone-min.js"></script> <script src="joint.js"></script>
我的demo裏還引用了bootstrap的依賴用來顯示模態框
html代碼
<body> <div id="paper" class="paper"></div> <div class="modal fade searchpanel" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="modalTitle">詳細信息</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> </div> </div> </div> </div> </body>
js代碼
首先是定義畫板和畫布，這裏重寫了ElementView和LinkView，目的是爲了讓畫出來的流程圖不能被刪除和編輯
var graph = new joint.dia.Graph(); var ElementView = joint.dia.ElementView.extend({ pointerdown: function () { this._click = true; joint.dia.ElementView.prototype.pointerdown.apply(this, arguments); }, pointermove: function(evt, x, y) { this._click = false; joint.dia.ElementView.prototype.pointermove.apply(this, arguments); }, pointerup: function (evt, x, y) { if (this._click) { // triggers an event on the paper and the element itself this.notify('cell:click', evt, x, y); } else { joint.dia.ElementView.prototype.pointerup.apply(this, arguments); } } }); var LinkView = joint.dia.LinkView.extend({ addVertex: function(evt, x, y) {}, removeVertex: function(endType) {}, pointerdown:function(evt, x, y) {} }); //定義畫布 var paper = new joint.dia.Paper({ el: $('#paper'), width: 1200, height: 600, gridSize: 1, model: graph, elementView: ElementView, linkView:LinkView }); //paper.$el.css('pointer-events', 'none')//去除默認樣式，使所有事件不可用
然後我寫了兩個函數分別用來創建形狀和連線，這樣寫可以減少代碼量，官方的demo也大都是這樣寫的
//定義形狀 var state = function(x, y, shape, background, text){ var cell; if(shape==="rect"){ cell = new joint.shapes.basic.Rect({ position: { x: x, y: y },//座標 size: { width: 140, height: 40 },//寬高 attrs: { rect: { fill: { type: 'linearGradient', stops: [ { offset: '0%', color: background },//漸變開始 { offset: '100%', color: '#fe8550' }//漸變結束 ], attrs: { x1: '0%', y1: '0%', x2: '0%', y2: '100%' } }, stroke: background,//邊框顏色 'stroke-width': 1//邊框大小 }, text: { text: text } //顯示文字 } }); } else if(shape==="ellipse"){ cell = new joint.shapes.basic.Ellipse({ position: { x: x, y: y },//座標 size: { width: 140, height: 40 },//寬高 attrs: { ellipse: { fill: { type: 'linearGradient', stops: [ { offset: '0%', color: background },//漸變開始 { offset: '100%', color: '#FFFFFF' }//漸變結束 ], attrs: { x1: '0%', y1: '0%', x2: '0%', y2: '100%' } }, stroke: background,//邊框顏色 'stroke-width': 1//邊框大小 }, text: { text: text } //顯示文字 } }); } graph.addCell(cell); return cell; }; //定義連線 function link(source, target, label){ var cell = new joint.dia.Link({ source: { id: source.id }, target: { id: target.id }, labels: [{ position: 0.5, attrs: { text: { text: label || '', 'font-weight': 'bold' } } }], router: { name: 'manhattan' },//設置連線彎曲樣式 manhattan直角 attrs: { '.connection': { stroke: '#333333',//連線顏色 'stroke-width': 2//連線粗細 }, '.marker-target': { fill: '#333333',//箭頭顏色 d: 'M 10 0 L 0 5 L 10 10 z'//箭頭樣式 } } }); graph.addCell(cell); return cell; }
最後就是我們實際的業務代碼了，這裏我們可以整理一下數據結構，把數據定義成json格式，然後寫一個函數通過json直接生成流程圖，當然座標需要尋找規律自己計算一下
//創建元素 var start = state(500,100,"ellipse","#00FFFF", "視頻播放成功率"); var state1 = state(500,200,"rect","#f7a07b", "GET響應成功率"); var state2 = state(400,300,"rect","#f7a07b", "HTTP錯誤碼分析"); var state3 = state(600,300,"rect","#f7a07b", joint.util.breakText("TCP異常和其他原因",{width:80})); var state4 = state(400,400,"rect","#f7a07b", "4XX、5XX分析"); var state5 = state(600,400,"rect","#f7a07b", "接口以上分析"); var state6 = state(750,400,"rect","#f7a07b", "接口以下分析"); //創建連線 link(start, state1, ""); link(state1, state2, "≥70%"); link(state1, state3, "<70%"); link(state2, state4, ""); link(state3, state5, "是"); link(state3, state6, "否"); //給所有元素添加點擊事件 paper.on('cell:click', function (e) { $("#detailModal .modal-body").html(""); var arr = $("#"+e.id+" tspan"); if(arr.length===1){ $(</span>"#detailModal .modal-body"<span style="color: #000000;">).append($(arr).html()); $("#detailModal").modal(); } else{ var tmp=""; $.each(arr, function(k,v){ tmp+=$(v).html(); }); $("#detailModal .modal-body").append(tmp); $("#detailModal").modal(); } });
後面是給每個元素（不包含連線）添加了一個點擊事件，彈出一個模態框，顯示當前點擊的內容。