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

效果图:

在这里插入图片描述

下载
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

Logo

前往低代码交流专区

更多推荐