Vue中使用dagre-d3绘制流程图实用指南

最新推荐文章于 2025-04-14 11:01:33 发布
最新推荐文章于 2025-04-14 11:01:33 发布
阅读量8.1k 收藏 34
点赞数 6
分类专栏： Vue常用插件 文章标签： d3 dagre-d3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sleepwalker_1992/article/details/128548760
版权
本文展示了如何在Vue项目中利用dagre-d3库绘制流程图，包括设置节点和边，实现从下到上的布局，添加拖拽缩放功能以及鼠标悬停时显示tooltip节点详细信息。示例代码详细解释了每个关键步骤，提供了一个完整的流程图组件实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、插件版本

    "d3": "^7.8.0",

    "dagre-d3": "^0.6.4",

2、绘制简单的流程图

<template>
  <div style="border: 1px solid #ccc; padding: 20px; width: 600px">
    <svg class="dagre" width="600" height="600">
        <g class="container"></g>
    </svg>
  </div>
</template>

<script>
import dagreD3 from 'dagre-d3';
import * as d3 from 'd3';

export default {
  name: 'dagre',
  data() {
    return {
        nodes: [
          {
            id: 0,
            nodeName: '节点0',
          },
          {
            id: 1,
            nodeName: '节点1',
          },
          {
            id: 2,
            nodeName: '节点2',
          },
          {
            id: 3,
            nodeName: '节点3',
          },
          {
            id: 4,
            nodeName: '节点4',
          },
          {
            id: 5,
            nodeName: '节点5',
          },
          {
            id: 6,
            nodeName: '节点6',
          },
          {
            id: 7,
            nodeName: '节点7',
          },
          {
            id: 8,
            nodeName: '节点8',
          },
          {
            id: 9,
            nodeName: '节点9',
          },
          {
            id: 10,
            nodeName: '节点10',
          },
          {
            id: 11,
            nodeName: '节点11',
          }, 
          {
            id: 12,
            nodeName: '节点12',
          },         
        ],
        edges: [
          {
            start: 1,
            end: 0,
          },
          {
            start: 2,
            end: 1,
          },
          {
            start: 3,
            end: 2,
          },
          {
            start: 4,
            end: 3,
          },
          {
            start: 5,
            end: 3,
          },
          {
            start: 6,
            end: 5,
          },
          {
            start: 7,
            end: 2,
          },
          {
            start: 8,
            end: 7,
          },
          {
            start: 9,
            end: 1,
          },
          {
            start: 9,
            end: 10,
          },
          {
            start: 11,
            end: 10,
          },
          {
            start: 12,
            end: 11,
          },          
        ],
    };
  },
  mounted() {
    this.draw();
  },
  methods: {
    // 绘制简单的流程图
    draw() {
        // 创建 Graph 对象
        const g = new dagreD3.graphlib.Graph().setGraph({
                    rankdir: 'BT', // 流程图从下向上显示，默认'TB'，可取值'TB'、'BT'、'LR'、'RL'
                  }).setDefaultEdgeLabel(function() { return {}; });

        // Graph添加节点
        this.nodes.forEach(node => {
            g.setNode(node.id, {
                id: node.id,
                label: node.nodeName,
                shape: 'rect',  //节点形状，可以设置rect(长方形),circle,ellipse(椭圆),diamond(菱形) 四种形状，还可以使用render.shapes()自定义形状
                style: 'fill:#61b2e4;stroke:#fff',  //节点样式,可设置节点的颜色填充、节点边框
                labelStyle: 'fill: #fff;font-weight:bold',  //节点标签样式, 可设置节点标签的文本样式（颜色、粗细、大小）
                rx: 5,  // 设置圆角
                ry: 5,  // 设置圆角
                paddingBottom: 15,
                paddingLeft: 20,
                paddingRight: 20,
                paddingTop: 15,
            });
        });

        // Graph添加节点之间的连线
        if(this.nodes.length > 1) {
            this.edges.forEach(edge => {
                g.setEdge(edge.start, edge.end, {
                    style: 'stroke: #0fb2cc; fill: none; stroke-width: 2px',  // 连线样式
                    arrowheadStyle: 'fill: #0fb2cc;stroke: #0fb2cc;',  //箭头样式，可以设置箭头颜色
                    arrowhead: 'normal',  //箭头形状，可以设置 normal,vee,undirected 三种样式，默认为 normal
                })
            });
        }

        // 获取要绘制流程图的绘图容器
        const container = d3.select('svg.dagre').select('g.container');

        // 创建渲染器
        const render = new dagreD3.render();
        // 在绘图容器上运行渲染器绘制流程图
        render(container, g);
    },
  },
};
</script>

<style>

</style>

效果图：

3、拖拽缩放

        // 拖拽缩放 "d3": "^7.8.0"
        const svg = d3.select('svg.dagre');
        let zoom = d3.zoom().on('zoom', function (current) {
          container.attr('transform', current.transform);
        });
        svg.call(zoom);

限制缩放范围

        let zoom = d3.zoom().scaleExtent([0.5, 2]).on('zoom', function (current) {
          container.attr('transform', current.transform);
        });

d3版本v5时的写法

        // 拖拽缩放 ("d3": "^5.15.0",)
        const svg = d3.select('svg.dagre');
        let zoom = d3.zoom().scaleExtent([0.5, 2]).on('zoom', function () {
          container.attr('transform', d3.event.transform);
        });
        svg.call(zoom);

效果：

4、鼠标悬停显示隐藏tooltip

        // 鼠标悬停显示隐藏tooltip
        const that = this;
        const tooltipBox = that.$refs.tooltip;
        container.on('mouseover', e => {
          that.currentNode = that.nodes.filter(item => item.id === Number(e.target.__data__))[0];
          tooltipBox.style.display = 'block';
          tooltipBox.style.top = e.clientY + 20 + 'px';
          tooltipBox.style.left = e.clientX + 'px';
        }).on('mouseout', function () {
          tooltipBox.style.display = 'none';
        })

效果：

 5、完整代码

<template>
  <div style="border: 1px solid #ccc; padding: 20px; width: 600px">
    <svg class="dagre" width="600" height="600">
        <g class="container"></g>
    </svg>
    <div ref="tooltip" class="tooltip">
      <div>节点ID：{{currentNode.id}}</div>
      <div>节点名称：{{currentNode.nodeName}}</div>
    </div>
  </div>
</template>

<script>
import dagreD3 from 'dagre-d3';
import * as d3 from 'd3';

export default {
  name: 'dagre',
  data() {
    return {
        currentNode: {
          id: null,
          nodeName: '',
        },
        nodes: [
          {
            id: 0,
            nodeName: '节点0',
          },
          {
            id: 1,
            nodeName: '节点1',
          },
          {
            id: 2,
            nodeName: '节点2',
          },
          {
            id: 3,
            nodeName: '节点3',
          },
          {
            id: 4,
            nodeName: '节点4',
          },
          {
            id: 5,
            nodeName: '节点5',
          },
          {
            id: 6,
            nodeName: '节点6',
          },
          {
            id: 7,
            nodeName: '节点7',
          },
          {
            id: 8,
            nodeName: '节点8',
          },
          {
            id: 9,
            nodeName: '节点9',
          },
          {
            id: 10,
            nodeName: '节点10',
          },
          {
            id: 11,
            nodeName: '节点11',
          }, 
          {
            id: 12,
            nodeName: '节点12',
          },         
        ],
        edges: [
          {
            start: 1,
            end: 0,
          },
          {
            start: 2,
            end: 1,
          },
          {
            start: 3,
            end: 2,
          },
          {
            start: 4,
            end: 3,
          },
          {
            start: 5,
            end: 3,
          },
          {
            start: 6,
            end: 5,
          },
          {
            start: 7,
            end: 2,
          },
          {
            start: 8,
            end: 7,
          },
          {
            start: 9,
            end: 1,
          },
          {
            start: 9,
            end: 10,
          },
          {
            start: 11,
            end: 10,
          },
          {
            start: 12,
            end: 11,
          },          
        ],
    };
  },
  mounted() {
    this.draw();
  },
  methods: {
    // 绘制简单的流程图
    draw() {
        // 创建 Graph 对象
        const g = new dagreD3.graphlib.Graph().setGraph({
                    rankdir: 'BT', // 流程图从下向上显示，默认'TB'，可取值'TB'、'BT'、'LR'、'RL'
                  }).setDefaultEdgeLabel(function() { return {}; });

        // Graph添加节点
        this.nodes.forEach(node => {
            g.setNode(node.id, {
                id: node.id,
                label: node.nodeName,
                shape: 'rect',  //节点形状，可以设置rect(长方形),circle,ellipse(椭圆),diamond(菱形) 四种形状，还可以使用render.shapes()自定义形状
                style: 'fill:#61b2e4;stroke:#fff',  //节点样式,可设置节点的颜色填充、节点边框
                labelStyle: 'fill: #fff;font-weight:bold',  //节点标签样式, 可设置节点标签的文本样式（颜色、粗细、大小）
                rx: 5,  // 设置圆角
                ry: 5,  // 设置圆角
                paddingBottom: 15,
                paddingLeft: 20,
                paddingRight: 20,
                paddingTop: 15,
            });
        });

        // Graph添加节点之间的连线
        if(this.nodes.length > 1) {
            this.edges.forEach(edge => {
                g.setEdge(edge.start, edge.end, {
                    style: 'stroke: #0fb2cc; fill: none; stroke-width: 2px',  // 连线样式
                    arrowheadStyle: 'fill: #0fb2cc;stroke: #0fb2cc;',  //箭头样式，可以设置箭头颜色
                    arrowhead: 'normal',  //箭头形状，可以设置 normal,vee,undirected 三种样式，默认为 normal
                })
            });
        }

        // 获取要绘制流程图的绘图容器
        const container = d3.select('svg.dagre').select('g.container');

        // 创建渲染器
        const render = new dagreD3.render();
        // 在绘图容器上运行渲染器绘制流程图
        render(container, g);

        // 拖拽缩放
        const svg = d3.select('svg.dagre');
        let zoom = d3.zoom().scaleExtent([0.5, 2]).on('zoom', current => {
          container.attr('transform', current.transform);
        });
        svg.call(zoom);

        
        // 鼠标悬停显示隐藏tooltip
        const that = this;
        const tooltipBox = that.$refs.tooltip;
        container.on('mouseover', e => {
          that.currentNode = that.nodes.filter(item => item.id === Number(e.target.__data__))[0];
          tooltipBox.style.display = 'block';
          tooltipBox.style.top = e.clientY + 20 + 'px';
          tooltipBox.style.left = e.clientX + 'px';
        }).on('mouseout', function () {
          tooltipBox.style.display = 'none';
        })
    },
  },
};
</script>

<style scoped>
.tooltip {
     position: absolute;
     font-size: 12px;
     background-color: white;
     border-radius: 3px;
     box-shadow: rgb(174, 174, 174) 0px 0px 10px;
     cursor: pointer;
     display: none;
     padding:10px;
 }

.tooltip>div {
     padding: 10px;
 }
</style>

6、参考资料

【1】 dagre-d3绘制流程图实用指南

js vuejs dagre-d3绘制流程图实用指南 有向图可视化
南七小僧的学海无涯
07-02 1695
之前有小伙伴问我如何使用 D3 在前端绘制流程图，今天在这里给安排上，与大家分享。明确一点，只要你的数据计算能力足够强，使用原生D3绘制流程图绝对可以的，但是，为了让大家更容易上手，避免重复造轮子，给大家推荐一个专门绘制流程图的 D3 插件 dagre-d3。首先认识下 dagre。dagre 是专注于有向图布局的 javascript 库，由于 dagre 仅仅专注于图形布局，需要使用其他方案根据 dagre 的布局信息来实际渲染图形，而 dagre-d3 就是 dagre 基于 D3 的渲染方案。
vue+dagre-d3前端流程图开发demo
08-12
1、一个支持增加节点、删除节点、修改节点的流程图，增加节点可选择并行、串行、会签、下一节点并行等状态； 2、支持设置条件、删除条件、查看条件； 3、可直观显示已完成的节点和不可查看的节点，真正做到了流程可视化。 4、支持画的流程图导出为图片格式； 5、支持鼠标缩放流程图；
前端vue3项目dagre-d3基础配置项及流程图组件示例（包括安装依赖）
m0_59603076的博客
07-02 2423
dagre-d3安装使用，有基础配置项说明，流程图组件示例，代码直接可复用
Vue流程图组件
最新发布
gitblog_06791的博客
04-14 245
Vue流程图组件 【下载地址】Vue流程图组件 这款基于Vue.js的流程图组件，专为开发者打造，支持拖拽创建图形元素，并通过箭头连接展示流程关系。它界面友好，操作简单，易于集成到现有Vue项目中。无论是绘制复杂的工作流还是简单的流程图，这款组件都能帮助你快速实现，提升开发效率。立即体验，让你的项目流程更加清晰直观！ ...
利用dagre-d3绘制交互式流程图教程
weixin_36059856的博客
09-04 1947
本文还有配套的精品资源，点击获取 简介：流程图在IT领域作为可视化工具，是展示程序执行步骤和工作流程的关键手段。本教程将指导如何使用dagre-d3库创建自定义和交互式的流程图。dagre用于布局有向图，而d3.js则用于在网页上创建复杂的图形和图表。结合这两个库，可以实现节点和边的优化布局，并通过d3.js丰富的API创造出视觉效果出色的流程图。教程将包含对源代码的深入分...
vue使用dagre-d3画流程图
tt1234561009的博客
10-18 5109
edges用来存储线条数据，start是开始节点，end是结束节点，label可以给线条命名。还可以使用render.shapes()自定义形状。需求：根据表格中的工序名称和上工序生成流程图。2）circle,ellipse(椭圆)数据处理，把表格数据转变成节点和线条数据。3）diamond(菱形)这世界很喧嚣，做你自己就好。1）rect(长方形)
vue3中使用d3.js绘制流程图(TS语法)
qq_45079530的博客
07-11 5989
【代码】vue3中使用d3.js绘制流程图(TS语法)
Vue Flow：绘制你的Vue 3流程图，让设计更自由！
2401_83063795的博客
07-05 3019
定制你的Vue 3流程图，释放创造力！
vue-flow绘制流程图
m0_50666077的博客
07-16 1万+
vue-flow绘制流程图
流程图_dagre-d3流程图_dagre-d3_DEMO_
10-03
dagre-d3流程图 demo简单的demo代码
基于dagre-d3自动画流程图的demo
04-30
然后，dagre-d3库会自动计算节点的位置，并使用D3.js来生成SVG元素显示流程图。 流程图的自动生成对许多应用场景非常有用，如软件设计、工作流展示、数据流程分析等。dagre-d3通过自动化布局，极大地简化了开发流程...
Vue+Antv X6绘制流程图demo
07-05
在Vue项目中使用AntV X6组件库绘制流程图，需要实现以下需求： 需求1：左侧菜单中的模块可以拖拽进入画布中生成对应的流程图模块 需求2：流程图中的节点之间可以进行连线交互 需求3：点击对应的节点后可以进行操作节点（删除、查看节点的相关信息参数） 需求4：鼠标悬浮在连线上时可以删除当前连线 隐含需求：节点样式需要满足`UI`设计，所以需要自定义节点样式 一个满足以上需求的Vue+Antv X6的项目 具体效果如下： https://img-blog.csdnimg.cn/a24d2e30b5a0481297f83c5a75b78b4f.png#pic_center
d3js流程图代码
04-09
使用d3js开发的js流程图，功能完善，支持事件操作，缩小，放大，平移，选中，保存流程图数据，动态加载流程图数据等功能
dagre/dagre-d3绘制流程图
high32的博客
06-05 9174
dagre/dagre-d3绘制流程图概念步骤知识点配置项gragh 配置node 配置edge 配置交互拖拽缩放鼠标悬停 tootip参考 概念 dagre 是专注于有向图布局的 javascript 库，由于 dagre 仅仅专注于图形布局 #F44336，需要使用其他方案根据 dagre 的布局信息来实际渲染图形，而 dagre-d3 就是 dagre 基于 D3 的渲染方案。 dagre: https://github.com/dagrejs/dagre dagre-d3: https://gith
Vue绘制业务流程图（附源码）
热门推荐
qq_32352777的博客
03-01 2万+
先给大家看一下效果图： 图中每个节点的字体颜色，边框颜色，连接线，图例说明等都是可以进行动态配置的. 项目源码在文章末尾。 目录 基本构成 数据格式 节点Nodes shape可选参数： animation可选参数： 边Edges 群组groups 图例guids 状态status 项目实战 前置条件 导入工具类 页面创建流程图容器 绘制图形 本...
vue 使用 AntV X6 绘制流程图
weixin_46328739的博客
06-01 4765
【代码】vue 使用 AntV X6 绘制流程图。
在vue中实现流程图
weixin_48447589的博客
07-07 1万+
当然这是我的练习，方便大家观看，如果有什么问题可以私信我。之后就是对 其中的方法进行调用即可，废话不多说，直接上代码。第一步：需要一个flow.js作为依据，可自取。之后再你的组件中将这个文件引入，
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值