專案中想搞定一個流程圖，開始使用了阿里的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/dagr