js流程图插件_D3绘制流程图？安排！

写在前面

之前有小伙伴问我如何使用 D3 在前端绘制流程图，今天在这里给安排上，与大家分享。

明确一点，只要你的数据计算能力足够强，使用原生D3绘制流程图绝对可以的，但是，为了让大家更容易上手，避免重复造轮子，给大家推荐一个专门绘制流程图的 D3 插件 dagre-d3。

首先认识下 dagre。dagre 是专注于有向图布局的 javascript 库，由于 dagre 仅仅专注于图形布局，需要使用其他方案根据 dagre 的布局信息来实际渲染图形，而 dagre-d3 就是 dagre 基于 D3 的渲染方案。

dagre 项目地址：https://github.com/dagrejs/dagre

dagre-d3 项目地址：https://github.com/dagrejs/dagre-d3

下面使用 D3 与 dagre-d3 绘制新冠疫情期间的流动人员检测流程图，老规矩先上效果图。

绘制基本流程图

数据准备

流程图作为一种有向图，与树图、网络图一样，数据由节点以及两点之间的边组成。

let dataset ={
    
  nodes: [
    {
    id: 0,label: "流动人员",shape: "rect"},
    {
    id: 1,label: "安全筛查",shape: "rect"},
    {
    id: 2,label: "热像仪人体测温筛查",shape: "diamond"},
    {
    id: 3,label: "人工复测",shape: "diamond"},
    {
    id: 4,label: "快速通过",shape: "rect"},
    {
    id: 5,label: "紧急处理",shape: "rect"}
   ],
   edges: [
     {
    source: 0,target: 1,label: ""},
     {
    source: 1,target: 2,label: ""},
     {
    source: 2,target: 4,label: "正常"},
     {
    source: 2,target: 3,label: "不正常"},
     {
    source: 3,target: 5,label: "不正常"},
     {
    source: 3,target: 4,label: "正常"}
   ]
}

绘图

使用 dagre-d3 绘制流程图分为以下个步骤

1.引入 d3.js 以及 dagre-d3.js 两个文件。2.使用 dagre-d3 创建 Graph 对象，并添加节点和边。3.创建渲染器并在 svg 上绘制流程图。

//引入 d3,dagre-d3
<script src="./d3.v5.min.js">script>
<script src="./dagre-d3.min.js">script>
<script>
// 创建 graph 对象
let g = new dagreD3.graphlib.Graph();
//设置图
g.setGraph({
    
 rankdir:'TB'
});
dataset.nodes.forEach(item => {
    
    g.setNode(item.id, {
    
      /