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

最新推荐文章于 2024-04-25 09:39:33 发布
最新推荐文章于 2024-04-25 09:39:33 发布
阅读量6.8k 收藏 27
点赞数 6
分类专栏： Vue常用插件 文章标签： d3 dagre-d3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sleepwalker_1992/article/details/128548760
版权

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绘制流程图实用指南

sleepwalker_1992
关注
  • 6
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
vue使用flowable绘制流程图.docx
12-11
vue使用flowable绘制流程图
基于dagre-d3自动画流程图的demo
04-30
基于dagre-d3自动画流程图的demo，是用JavaScript和html运行的，必要的库已经放在包里 面了，直接点击demo目录下的html即可运行。 有时间再写写这些文章的解析吧
Vue常用插件汇总(1)
2401_84150154的博客
04-13 844
点击这里即可获取，包括答案解析。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-rKDCW3XC-1712977895317)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）点击这里即可获取，包括答案解析。
记录Vue项目中使用的各插件
Mr.小灰狼_随笔
07-08 2757
记录Vue项目中使用的各插件 记录项目 package.json 文件中各插件的使用 ： 目录 1、axios 2、babel-polyfill 3、core-js 4、echarts 5、element-ui 6、es6-promise 7、js-beautify 8、js-cookie 9、nprogress 10、promise-polyfill 11、qs 12、vue
使用dagreD3绘制流程节点（vue3+ts）附全代码，粘贴直接可用
qq_57956183的博客
11-30 1366
【代码】使用dagreD3绘制流程节点（vue3+ts）附全代码，粘贴直接可用。
vue使用dagre-d3画流程图
tt1234561009的博客
10-18 3991
edges用来存储线条数据，start是开始节点，end是结束节点，label可以给线条命名。还可以使用render.shapes()自定义形状。需求：根据表格中的工序名称和上工序生成流程图。2）circle,ellipse(椭圆)数据处理，把表格数据转变成节点和线条数据。3）diamond(菱形)这世界很喧嚣，做你自己就好。1）rect(长方形)
vue2开发必备插件
Mabel_cw的博客
06-09 1137
一开始使用了wangEditor，vue 版本咋都装不上，为了应付给客户简单展示页面，只需要提供展示编辑器，选择了vue版本的markDown,简单方便快捷。根据业务需求，实现一个流程图的demo，代码一并乘现给各位小主。此文档正在策马奔腾随着业务开发，持续更新中。让你的数据动起来，扭起来。
vue中使用bpmn-js绘制流程图，并实现汉化、自定义Palette及ContextPad。
weixin_45952434的博客
03-15 5107
vue中使用bpmnjs绘制流程图，实现汉化、自定义palette、contextpad及右侧properties-panel
推荐开源项目：Dagre-D3 - 强大的图绘制库
最新发布
gitblog_00087的博客
04-25 384
推荐开源项目：Dagre-D3 - 强大的图绘制库 项目地址:https://gitcode.com/cpettitt/dagre-d3 项目简介 Dagre-D3 是一个基于 D3.js 的图表渲染库，特别适用于绘制有向无环图（Directed Acyclic Graph, DAG）和其他复杂的网络结构。该项目由 Chris Pettitt 开发并维护，它结合了 Dagre 和 D3.js 的优...
vue2项目中使用 Graph F6 绘制 Dagre 流程图？
SM_Cute的博客
08-01 648
vue2项目中使用 Graph F6 绘制 Dagre 流程图？
jsPlumbAPI--拖拽绘制流程图
11-26
jsPlumbAPI--拖拽绘制流程图、状态机，支持jQuery,javascript,浏览器兼容性能佳
流程图-vue：流程图的vue版本
02-06
流程图 项目flowchart的vue版本 展示效果： 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。
vue+dagre-d3前端流程图开发demo
08-12
1、一个支持增加节点、删除节点、修改节点的流程图，增加节点可选择并行、串行、会签、下一节点并行等状态； 2、支持设置条件、删除条件、查看条件； 3、可直观显示已完成的节点和不可查看的节点，真正做到了流程...
流程图_dagre-d3流程图_dagre-d3_DEMO_
10-03
dagre-d3流程图 demo简单的demo代码
vue-d3-network：使用d3-force绘制网络图的Vue组件
02-06
vue-d3-网络 Vue组件使用d3-force绘制图形网络 演示版 产品特点 SVG渲染 画布渲染 链接和节点选择 svg <->通过CSS共享画布样式 屏幕截图，导出为svg或png（svg渲染器），导出为png（画布渲染器） 触控支持 安装 ...
Vue 使用jsPlumb 实现连线绘图
银滴子的博客
01-30 5357
Vue 使用jsPlumb 实现连线绘图
vue 使用 AntV X6 绘制流程图
weixin_46328739的博客
06-01 3047
【代码】vue 使用 AntV X6 绘制流程图。
Vue+bpmn.js自定义流程图（一）
imapig_的博客
01-13 4235
bpmn.js自定义流程图样式
vue dagre-d3.js
07-16
### 回答1： Vue dagre-d3.js是一个用于在Vue.js框架中实现DAG（有向无环图）可视化的库。它结合了vue.js、dagre和d3.js这三个库的功能。 DAG是一种图形结构，其中节点表示任务或事件，边表示任务之间的依赖关系。DAG的可视化对于理解和分析任务之间的关系非常有帮助。 Vue dagre-d3.js库通过提供一组Vue组件，使DAG的可视化变得容易。它利用了dagre-d3和d3.js库的功能来布局和渲染DAG图。 使用Vue dagre-d3.js库，我们可以将DAG图表示为一个Vue组件，该组件可以在Vue应用程序中使用。我们可以定义节点和边，并指定它们之间的关系。然后，Vue dagre-d3.js库将负责将该图形布局为可视化的DAG图。 该库提供了一些自定义选项，可以定义节点的样式，边的样式和布局选项。通过这些选项，我们可以自定义DAG图的外观和布局以满足特定需求。 总之，Vue dagre-d3.js是一个方便易用的库，可以在Vue.js应用程序中实现DAG图的可视化。它简化了创建和布局DAG图的过程，并提供了许多定制选项来满足不同需求。无论是在项目管理、工作流程分析还是其他领域，Vue dagre-d3.js都是一个有价值的工具。 ### 回答2： Vue dagre-d3.js 是一个基于 Vue.js 的库，用于在 web 页面上绘制和可视化图形。它使用了 dagre-d3.js 库作为底层，使得在 Vue.js 中使用 dagre-d3.js 变得更加简单。 dagre-d3.js 是一个使用 d3.js 的 JavaScript 库，用于在 web 页面上绘制有向无环图（DAG）。它提供了一套强大的布局算法，可以将节点和边按照一定的规则自动排列成一张美观的图形。 Vue dagre-d3.js 的主要功能包括创建图形，添加节点和边，设置节点和边的样式，以及支持交互操作。在 Vue.js 中使用它，我们可以通过引入组件的方式来使用它，然后在组件中通过配置选项来定义图形的结构和样式。 通过 Vue dagre-d3.js，我们可以轻松地绘制各种类型的图形，如组织结构图、流程图、依赖关系图等。它提供了丰富的配置选项，可以自定义节点和边的样式，包括颜色、大小、形状等。同时，它还支持拖拽、缩放等交互操作，使得用户可以灵活地操作图形。 总结来说，Vue dagre-d3.js 是一个方便在 Vue.js 中使用 dagre-d3.js 库的工具，它能够帮助我们快速地实现图形的创建、布局和交互。无论是需要在网页上展示图形，还是进行图形数据的可视化分析，Vue dagre-d3.js 都是一个不错的选择。 ### 回答3： Vue Dagre-d3.js是一个基于Vue框架和Dagre-d3.js库的图形可视化组件。 Dagre-d3.js是一个用于绘制有向无环图（DAG）和树的JavaScript库。它基于Dagre图布局引擎和D3.js可视化库，提供了快速、灵活和可定制的图形布局和绘制功能。 Vue Dagre-d3.js利用了Vue框架的特性和Dagre-d3.js的强大功能，提供了一种更加便捷的方式来构建和渲染图形可视化组件。 使用Vue Dagre-d3.js，我们可以轻松地在Vue项目中绘制各种类型的图形，如有向无环图（DAG）、树状图等。我们可以通过定义节点和边的数据模型，并使用Vue的数据驱动特性来动态更新图形的布局和内容。 Vue Dagre-d3.js还提供了丰富的配置选项和事件回调函数，使我们可以自定义图形的外观和交互行为。我们可以设置节点和边的样式、大小和位置，以及鼠标交互时的动画效果。 总而言之，Vue Dagre-d3.js是一个功能强大、易于使用和可定制的图形可视化组件，它结合了Vue框架和Dagre-d3.js库的优势，为我们提供了一种简单而灵活的方式来构建和展示各种图形。无论是构建管理系统、数据分析仪表盘还是可视化数据结构，Vue Dagre-d3.js都是一个不错的选择。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值