vue中使用基于d3的dagre-d3.js做一个流程图组件

由于工作中用到了此插件制作简易流程图，以前没用过，特此记录

效果图：

下载

npm install d3
npm install dagre-d3

html

<svg width="400" height="253">
     <g />
     <rect />
</svg>

1.声明数组state（点）和edg（边）

图形中最重要的就是节点和连线（节点之间的联系）

list: {
   //节点
　　nodeInfos: [
　　　　{
　　　　　　id: "node1",
　　　　　　label: "节点1",
　　　　},
　　　　{
　　　　　　id: "node2",
　　　　　　label: "节点2",
　　　　},
　　　　{
　　　　　　id: "node3",
　　　　　　label: "节点3",
　　　　},
　　　　{
　　　　　　id: "node4",
　　　　　　label: "节点4",
　　　　},
　　],
　　//节点之间的连线
　　edges: [
　　　　{
　　　　　　source: "node1",
　　　　　　target: "node2",
　　　　},
　　　　{
　　　　　　source: "node2",
　　　　　　target: "node3",
　　　　},
　　　　{
　　　　　　source: "node2",
　　　　　　target: "node4",
　　　　},
　　]
}

节点可以包含很多信息，比如节点的形状、大小、背景颜色。接下来就是绘制流程图了，首先呢需要先获取实例对象并且做一些简单的配置。

2.创建对象graph。

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

3.声明并添加节点和连线。

//添加节点
this.list.nodeInfos.forEach((item, index) => {
    g.setNode(item.id, {
      id: item.id,
      label: item.label,
      class: 'type-1'
    });
});
//添加连线
this.list.edges.forEach(item => {
    g.setEdge(item.source, item.target, {
      style: "stroke: #0fb2cc; fill: none;",
      arrowheadStyle: "fill: #0fb2cc;stroke: #0fb2cc;",
      arrowhead: 'vee'
    });
});

4.渲染图形

var render = new dagreD3.render();
    var svg = d3.select("svg"); //声明节点
    svg.select("g").remove(); //删除以前的节点，清空画面
    var svgGroup = svg.append("g");
    var inner = svg.select("g");
    var zoom = d3.zoom().on("zoom", function () { //添加鼠标滚轮放大缩小事件
      inner.attr("transform", d3.event.transform);
    });
    svg.call(zoom);
    this.drawNode();//画点
    this.drawEdg();// 画连线
    render(d3.select("svg g"), this.g); //渲染节点
    let max = svg._groups[0][0].clientWidth>svg._groups[0][0].clientHeight?svg._groups[0][0].clientWidth:svg._groups[0][0].clientHeight;
    var initialScale = max/779; //initialScale元素放大倍数，随着父元素宽高发生变化时改变初始渲染大小
    var tWidth = (svg._groups[0][0].clientWidth  - this.g.graph().width * initialScale) / 2; //水平居中
    var tHeight = (svg._groups[0][0].clientHeight  - this.g.graph().height * initialScale) / 2; //垂直居中
    svg.call(zoom.transform, d3.zoomIdentity.translate(tWidth, tHeight).scale(initialScale)); //元素水平垂直居中

5.事件

基本图形渲染完成之后，我们还可以给节点添加一些事件，例如点击事件,如下：

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://github.com/dagrejs/dagre-d3.git