vue js 流程图

需求：用代码做一个流程图

安装d3和

yarn add d3
yarn add dagre-d3

引入

import dagreD3 from "dagre-d3";
import * as d3 from "d3";

html

<template>
    <div>
      <!-- <svg id="svg-canvas" width="800" height="100">
        <g />
        <rect />
      </svg> -->
      <div id="flowchart"></div>
    </div>
</template>

js代码

export default {
  name: 'Index',
  data() {
    return {
      list: {
        nodeInfos: [
          {
            id: '1',
            label: '新建中',
          },
          {
            id: '2',
            label: '发起人-编辑中',
          },
          {
            id: '3',
            label: 'QA-审核中',
          },
          {
            id: '4',
            label: '分管-审核中',
          },
          {
            id: '5',
            label: '结束',
          },
        ],
        edges: [
          {
            source: '1',
            target: '2',
            label: '保存',
          },
          {
            source: '1',
            target: '3',
            label: '提交',
          },
          {
            source: '3',
            target: '4',
            label: '同意',
          },
          {
            source: '3',
            target: '2',
            label: '拒绝',
          },
          {
            source: '4',
            target: '5',
            label: '同意',
          },
          {
            source: '4',
            target: '2',
            label: '拒绝',
          },
          {
            source: '2',
            target: '2',
            label: '保存',
          },
          {
            source: '2',
            target: '3',
            label: '提交',
          },
        ],
      },
    };
  },
  mounted() {
    this.getCanvas();
  },
  methods: {
    getCanvas() {
      //获取D3
      var g = new dagreD3.graphlib.Graph().setGraph({
        // rankdir: 'BT',//渲染数据的方向：LR为水平方向，BT垂直方向
        // align: 'DL',
        // nodesep: 40,
        // edgesep: 80,
        // ranksep: 60,
        // marginx: 140,
        // marginy: 140,
      });
      console.log(g);
      // 添加节点
      this.list.nodeInfos.forEach((item, index) => {
        item.rx = item.ry = 5; //圆角
        if (item.id === '1' || item.id === '5') {
          item.rx = item.ry = 100; //圆角
        }
        if (item.id === '2') {
          item.rx =100;
           item.ry = 10; 
        }
        g.setNode(item.id, item);
        // 节点颜色 fill指节点背景色，stroke指节点描边颜色
        g.node(item.id).style = 'fill:' + '#e1efe1' + ';stroke: green;';
      });
      // 链接关系
      this.list.edges.forEach((item) => {
        g.setEdge(item.source, item.target, {
          // 连线上的条件字
          label: item.label,
          // 连线的颜色
          style: 'stroke: #0fb2cc; fill: none;',
          // 箭头颜色
          arrowheadStyle: 'fill: #0fb2cc;stroke: #0fb2cc;',
          // 箭头形状（vee表示箭头是尖的，默认是平的）
          arrowhead: 'vee',
        });
      });
      g.nodes().forEach(function (v) {
        // console.log('Node ' + v + ': ' + JSON.stringify(g.node(v)));
      });
      g.edges().forEach(function (e) {
        // console.log('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));
      });
      //绘制图形(此处和darg中的不同)
      var svg = d3.select('#flowchart').append('svg').attr('width', 1000).attr('height', 1500);
      var inner = svg.append('g');
      //缩放
      var zoom = d3.zoom().on('zoom', function () {
        inner.attr('transform', d3.zoomTransform(svg.node()));
      });
      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);
        })
        .on('mouseover', (e) => {
          //鼠标经过事件
          let curNode = g.node(e);
          // console.log(curNode, 'curNode');
        });
      // 初始化缩放比例
      var initialScale = 1;
      // 设置宽高
      svg.call(
        zoom.transform,
        d3.zoomIdentity.translate((svg.attr('width') - g.graph().width * initialScale) / 2, 20).scale(initialScale)
      );
      svg.attr('height', g.graph().height * initialScale + 40);
    },
  },
};

琢磨了很久，不知道好看的样式怎么调 ，慢慢来吧