D3.js的V5版本-Vue框架中使用-流程图

因最近公司项目用到流程图,网上找了些资料,自己写写,总结下

1. 效果展示

2. 使用dagre-d3

需要安装dagre-d3库，d3的流程图库。

3. 代码示例（封装组件）

//得到流程图绘制对象

this.graph = new dagreD3.graphlib.Graph().setGraph({

     // 控制方向

     rankdir: this.direction

}).setDefaultEdgeLabel(function () { return {} })`

//绘制节点

this.graph.setNode()

//绘制连接

this.graph.setEdge()

温馨提示：详细使用可以去官网查询

4.组件调用