2021-08-05 Vue+D3实现一个动态的流程图

标题 Vue+D3实现一个动态的流程图

解决了D3v6传参的一些问题（鼠标经过获取不到节点等）
能够像动画一样自动播放的流程图
根据数据自动生成节点，不需要自己手写节点的位置
附上D3.js官网链接:https://d3js.org/

<template><div><div id="tooltip" class="hidden"><p><span id="tooltip_value"></span></p></div><svg width="1000" height="1500"><g /></svg><button @click="startType()" :disabled="dis">{{ btnMsg }}</button></div>
</template><script>
//D3和引入
import * as d3 from "d3";
import dagreD3 from "dagre-d3";
export default {data() {return {list: {nodeInfos: [{id: "1",label: "start},{id: "2",label: "step2",state: ""},{id: "3",label: "step2"},{id: "4",label: "step2"},{id: "5",label: "结束"},{id: "6",label: "结束"},{id: "7",label: "结束"},{id: "8",label: "结束-审核中"},{id: "9",label: "9"},{id: "10",label: "10"},edges: [{source: "1",target: "2",label: "保存"},{source: "1",target: "3",label: "提交"},{source: "1",target: "4",label: "同意"},{source: "1",target: "5",label: "同意"},{source: "1",target: "6",label: "同意"},{source: "1",target: "7",label: "同意"},{source: "1",target: "8",label: "同意"},{source: "2",target: "9",label: "同意"},{source: "3",target: "10",label: "同意"},]},flagColor: "#eee",btnMsg: "开始",dis: false};},computed: {//这是一个控制流程图重新播放的方法startType() {return this.btnMsg == "开始" ? this.startProgress : this.startAgain;}},mounted() {this.addNode();},methods: {addNode() {//获取D3var g = new dagreD3.graphlib.Graph().setGraph({ rankdir: "LR" }).setDefaultEdgeLabel(function() {return {};});// 添加节点this.list.nodeInfos.forEach((item, index) => {item.rx = item.ry = 5; //圆角g.setNode(item.id, item);// 节点颜色 fill指节点背景色，stroke指节点描边颜色if (item.state == "1") {this.flagColor = "red";} else {this.flagColor = "#eee";}g.node(item.id).style = "fill:#eee;stroke:" + this.flagColor + ";";});// 链接关系this.list.edges.forEach(item => {if (item.state == "1") {this.flagColor = "red";} else {this.flagColor = "#eee";}g.setEdge(item.source, item.target, {label: item.label,style: "stroke:" + this.flagColor + ";fill:none;",arrowheadStyle:"fill:" + this.flagColor + ";stroke: " + this.flagColor + ";",arrowhead: "vee"});});//绘制图形var svg = d3.select("svg"), //声明节点inner = svg.select("g");var render = new dagreD3.render();render(inner, g); //渲染节点// 经过显示详情inner.selectAll("g.node")//D3v6中的传参模式已更改，第一个参数是鼠标事件，第二个参数才是节点内容.on("mouseover", (e, d) => {d3.select("#tooltip").attr("style","left:" +g.node(d).x +"px" +";top:" +g.node(d).y +"px" +";padding:" +10 +"px").select("#tooltip_value").text(g.node(d).label);}).on("mouseout", (e, d) => {d3.select("#tooltip").attr("style", "display:" + "none");});d3.select("#tooltip").classed("hidden", false);// 初始化缩放比例var initialScale = 1;svg.attr("height", g.graph().height * initialScale + 40);},//点击播放startProgress() {var that = this;that.dis = true;that.list.nodeInfos[0].state = "1";that.addNode();setTimeout(function() {for (var i = 0; i < that.list.edges.length; i++) {(function(j) {setTimeout(function() {that.list.edges[j]["state"] = "1";if (that.list.edges[j]["state"] == "1") {// console.log(num);// 获取对应的节点let obj = that.list.nodeInfos.find(function(e) {return e.id == that.list.edges[j].target;});obj["state"] = "1";}that.addNode();}, 1000 * j);})(i);}}, 1000);setTimeout(function() {that.dis = false;that.btnMsg = "重新播放";}, 1000 * that.list.edges.length);},//重新播放startAgain() {for (var i = 0; i < this.list.nodeInfos.length; i++) {this.list.nodeInfos[i].state = "";}for (var i = 0; i < this.list.edges.length; i++) {this.list.edges[i].state = "";}this.startProgress();}}
};
</script><style>
svg {font-size: 14px;
}#tooltip.hidden {display: none;
}
#tooltip {position: absolute;background: #f6f7d8;border-radius: 5px;
}#tooltip p {margin: 0;font-family: sans-serif;font-size: 10px;
}
</style>

以上代码有一部分是借鉴别人的然后自己增加了一些功能，代码可能有些乱，仅供参考

2021-08-05 Vue+D3实现一个动态的流程图相关推荐

在vue中使用d3做一个动态加载的树形图
树形图数据量可能会很大,一次性全部加载可能会有延迟,所以一开始只加载一层节点的数据,当我们点击节点去展开的子节点的时候,再通过请求去加载子节点的数据,并更新到树上本demo中还添加了放大缩小.点击节 ...
（四十五：2021.08.05）《利用深度学习对ecg信号进行分割》
<Deep Learning for ECG Segmentation><利用深度学习对ecg信号进行分割> 讲在前面摘要 1. 介绍 2. 算法 2.1 预处理 2.2 神 ...
2021/07/05 基于dev,新建一个分支
首先切换到dev分支上,拉最新代码:git checkout dev/git pull 从已有分支上,创建一个自己需要的分支(如:taip):git checkout -b taip 创建完可以查看一 ...
Vue+Vuex+Axios+ECharts 画一个动态更新的中国地图
一.生成项目及安装插件 # 安装 Vue Cli npm install vue-cli -g# 初始化项目 vue init webpack vue-china-map# 切到目录下 cd vue- ...
我的日常学习笔记 18.05.08（Vue自定义事件）
继续看Vue组件的内容(9点) 昨天晚上看了一下动态组件,总结一下: 组件里的动态切换,通过vue的component元素加一个is特性来实现: 文档写了两种:一种是一个变量,传组件名进去,组件是注册 ...
用前端代码编写一个动态的罗盘时钟
用前端代码编写一个动态的罗盘时钟前言一.代码如下 1.index 2.js 3.css 页面效果前言今天给大家分享一个罗盘时钟的前端代码,喜欢的小伙伴帮忙点赞一下噢! 一.代码如下 1.ind ...
2021年05月软件设计师真题透析
2021年05月软件设计师上午真题及答案解析 1. 在 CPU 中,用( )给出将要执行的下一条指令在内存中的地址. A.程序计数器 B.指令寄存器 C.主存地址寄存器 D.状态条件寄存器答案:A, ...
animation基础练习源码_用vue简单写一个音乐播放组件「附源码」
作者:vipbic 转发链接:https://segmentfault.com/a/1190000022980992 前言上次小编也分享一个关于Vue 开发过音乐播放对项目: 基于 electron ...
《安富莱嵌入式周报》第227期：2021.08.23--2021.08.29
往期周报汇总地址:http://www.armbbs.cn/forum.php?mod=forumdisplay&fid=12&filter=typeid&typeid=104 ...

2021-08-05 Vue+D3实现一个动态的流程图

标题 Vue+D3实现一个动态的流程图

2021-08-05 Vue+D3实现一个动态的流程图相关推荐

最新文章

热门文章