在vue中使用基於d3爲基礎的dagre-d3.js搞定一個流程圖組件

項目中想搞定一個流程圖，開始使用了阿里的G6，可是G6目前不支持手勢，這樣就很鬱悶了，由於公司的領導都是使用iPad看的，你不支持手勢是不行的，後來又想到了百度的echarts，試了試，感受還不錯，手機端也是沒問題的，可是用起來不是很好用，每一個節點的位置還要本身去設置計算有點麻煩，因此想找個在支持pc和wap而且使用方便的，結果找到了dagre-d3.js，徹底知足個人需求啊，就是文檔不全，還大多數都是英文。搞完以後以爲有必要記錄一下，哈哈哈。

首先避免不了的就是下載，既然是基於d3的確定是要連同d3一下下載的。

npm install d3

npm install dagre-d3

 下載完畢就開始使用了，若是下載的時候報錯了能夠嘗試cnpm下載。

 下載完以後就要說說數據結構了,以下圖：

，

從圖中咱們能夠知道須要兩個數據，第一個是節點信息，包含節點名稱、ID、狀態等等只要是節點信息均可以放在裏邊；第二個是節點之間的關係，能夠簡單的理解成管道，好比從節點1--->節點2。

因此咱們的數據結構是這樣的：

 1 list: {  2 　　nodeInfos: [  3 　　　　{  4 　　　　　　id: "node1",  5 　　　　　　label: "節點1",  6 　　　　},  7 　　　　{  8 　　　　　　id: "node2",  9 　　　　　　label: "節點2", 10 　　　　}, 11 　　　　{ 12 　　　　　　id: "node3", 13 　　　　　　label: "節點3", 14 　　　　}, 15 　　　　{ 16 　　　　　　id: "node4", 17 　　　　　　label: "節點4", 18 　　　　}, 19 　　], 20 　　edges: [ 21 　　　　{ 22 　　　　　　source: "node1", 23 　　　　　　target: "node2", 24 　　　　}, 25 　　　　{ 26 　　　　　　source: "node2", 27 　　　　　　target: "node3", 28 　　　　}, 29 　　　　{ 30 　　　　　　source: "node2", 31 　　　　　　target: "node4", 32 　　　　}, 33 　　] 34 }

其中nodeInfos是節點信息，edges是節點之間的關係，固然節點的信息能夠包含不少信息，好比節點的形狀、大小、背景顏色，圓角等等，同時也能夠在設置節點信息的時候添加或者根據你本身節點的狀態判斷顯示什麼樣的樣式。接下來就是繪製流程圖了，首先呢須要先獲取實例對象而且作一些簡單的配置。咱們直接使用默認的就能夠。

1 var g = new dagreD3.graphlib.Graph().setGraph({}).setDefaultEdgeLabel(function() { return {}; });

接下來就是添加節點

this.list.nodeInfos.forEach((item, index) => {
 g.setNode(item.id, item); });

而後在加上節點關係

this.list.edges.forEach(item => { g.setEdge(item.source, item.target, {}); });

最後就是繪製圖形了

var svg = d3.select("svg"), i nner = svg.select("g"); //縮放
    var zoom = d3.zoom().on("zoom", function () { inner.attr("transform", d3.event.transform); }); svg.call(zoom); var render = new dagreD3.render(); render(inner, g);

這樣簡單的流程圖就完成了，若是想加點擊事件呢，能夠這樣

let code; inner.selectAll("g.node").on("click", e => { //點擊事件
    code = this.list.nodeInfos.filter(item => { return item.id == e; }); console.log(code); });

最最簡單的一個流程圖組件就完成了，固然了dagre-d3.js不單單是這點功能，還有許多能夠設置的，你們多練一練就能夠嘍。

demo地址：https://gitee.com/webliusong/dagre-d3

原文出處：https://www.cnblogs.com/liushusong/p/11996770.html