項(xiàng)目中想搞定一個(gè)流程圖，開始使用了阿里的G6，但是G6目前不支持手勢(shì)霎挟，這樣就很郁悶了，因?yàn)楣镜念I(lǐng)導(dǎo)都是使用iPad看的麻掸，你不支持手勢(shì)是不行的，后來又想到了百度的echarts赐纱，試了試脊奋，感覺還不錯(cuò)，手機(jī)端也是沒問題的疙描，但是用起來不是很好用诚隙，每個(gè)節(jié)點(diǎn)的位置還要自己去設(shè)置計(jì)算有點(diǎn)麻煩，所以想找個(gè)在支持pc和wap并且使用方便的起胰，結(jié)果找到了dagre-d3.js久又，完全滿足我的需求啊，就是文檔不全效五，還大多數(shù)都是英文地消。搞完之后覺得有必要記錄一下，哈哈哈畏妖。
首先避免不了的就是下載脉执，既然是基于d3的肯定是要連同d3一下下載的。
npm install d3
npminstalldagre-d3
?下載完畢就開始使用了戒劫，如果下載的時(shí)候報(bào)錯(cuò)了可以嘗試cnpm下載半夷。
?下載完之后就要說說數(shù)據(jù)結(jié)構(gòu)了,如下圖：
婆廊，
從圖中我們可以知道需要兩個(gè)數(shù)據(jù)，第一個(gè)是節(jié)點(diǎn)信息巫橄，包含節(jié)點(diǎn)名稱淘邻、ID、狀態(tài)等等只要是節(jié)點(diǎn)信息都可以放在里邊湘换；第二個(gè)是節(jié)點(diǎn)之間的關(guān)系宾舅，可以簡(jiǎn)單的理解成管道，比如從節(jié)點(diǎn)1--->節(jié)點(diǎn)2枚尼。
所以我們的數(shù)據(jù)結(jié)構(gòu)是這樣的：
1 list: { 2 nodeInfos: [ 3 { 4 id: "node1", 5 label: "節(jié)點(diǎn)1", 6 }, 7 { 8 id: "node2", 9 label: "節(jié)點(diǎn)2",10 },11 {12 id: "node3",13 label: "節(jié)點(diǎn)3",14 },15 {16 id: "node4",17 label: "節(jié)點(diǎn)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是節(jié)點(diǎn)信息贴浙，edges是節(jié)點(diǎn)之間的關(guān)系，當(dāng)然節(jié)點(diǎn)的信息可以包含很多信息署恍，比如節(jié)點(diǎn)的形狀崎溃、大小、背景顏色盯质，圓角等等袁串，同時(shí)也可以在設(shè)置節(jié)點(diǎn)信息的時(shí)候添加或者根據(jù)你自己節(jié)點(diǎn)的狀態(tài)判斷顯示什么樣的樣式。接下來就是繪制流程圖了呼巷，首先呢需要先獲取實(shí)例對(duì)象并且做一些簡(jiǎn)單的配置囱修。我們直接使用默認(rèn)的就可以。
1varg =newdagreD3.graphlib.Graph().setGraph({}).setDefaultEdgeLabel(function() {return{}; });
接下來就是添加節(jié)點(diǎn)
this.list.nodeInfos.forEach((item, index) => {? ? g.setNode(item.id, item);
});
然后在加上節(jié)點(diǎn)關(guān)系
this.list.edges.forEach(item => {
? ? g.setEdge(item.source, item.target, {});
});
最后就是繪制圖形了
varsvg = d3.select("svg"),
i? ? nner = svg.select("g");
? ? //縮放varzoom = d3.zoom().on("zoom",function () {
? ? inner.attr("transform", d3.event.transform);
});
? ? svg.call(zoom);
? ? varrender =new dagreD3.render();
? ? render(inner, g);
這樣簡(jiǎn)單的流程圖就完成了王悍，如果想加點(diǎn)擊事件呢破镰，可以這樣
let code;
inner.selectAll("g.node").on("click", e => {
? ? //點(diǎn)擊事件code =this.list.nodeInfos.filter(item => {
? ? ? ? returnitem.id == e;
? ? });
? ? console.log(code);
});
最最簡(jiǎn)單的一個(gè)流程圖組件就完成了，當(dāng)然了dagre-d3.js不僅僅是這點(diǎn)功能压储，還有許多可以設(shè)置的鲜漩，大家多練一練就可以嘍。
