在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是節點之間的關系，當然節點的信息可以包含很多信息，比如節點的形狀、大小、背景顏色，圓角等等，同時也可以在設置節點信息的時候添加或者根據你自己節點的狀態判斷顯示什么樣的樣式。接下來就是繪制流程圖了，首先呢需要先獲取實例對象並且做一些簡單的配置。我們直接使用默認的就可以。

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