vue使用dagre-d3画流程图的完整代码

2024-03-01 0 283
目录
  • 一、安装依赖
  • 二、dagre-d3基础
  • 三、流程图
  • 四、效果展示
  • 五、节点点击事件
  • 总结

一、安装依赖

npm install –save d3 dagre-d3

vue使用dagre-d3画流程图的完整代码

二、dagre-d3基础

vue使用dagre-d3画流程图的完整代码

其实画普通的流程图很简单,主要关注节点数据和线条数据,以上图为例nodes用来存储节点数据id必须唯一,nodeName是节点名称,shape是节点形状:

1)rect(长方形)

2)circle,ellipse(椭圆)

3)diamond(菱形)

还可以使用render.shapes()自定义形状

edges用来存储线条数据,start是开始节点,end是结束节点,label可以给线条命名

vue使用dagre-d3画流程图的完整代码

三、流程图

需求:根据表格中的工序名称和上工序生成流程图

vue使用dagre-d3画流程图的完整代码

列表数据如下:

tableList: [{
name: \”节点一\”,
pre: []
},{
name: \”节点二\”,
pre: [\”节点一\”]
},{
name: \”节点三\”,
pre: [\”节点一\”]
},{
name: \”节点四\”,
pre: [\”节点二\”, \”节点三\”]
},{
name: \”节点五\”,
pre: [\”节点四\”]
},{
name: \”节点六\”,
pre: [\’节点四\’]
},{
name: \”节点七\”,
pre: [\’节点五\’, \’节点六\’]
}]

数据处理,把表格数据转变成节点和线条数据

async changeData() {
// 给每个节点设置对应的编号
this.tableList.map((v, i) => {
this.indexObj[v.name] = i;
});
await this.tableList.map(async (v, i) => {
// 点
this.nodes.push({
id: i,
nodeName: v.name,
shape: \”rect\”
});
// 线
let arr = await this.getLine(v);
this.edges = this.edges.concat(arr);
});
this.draw();
},
getLine(node) {
let brr = [];
if (node.pre.length) {
if (node.pre.length === 1) {
brr.push({
start: this.indexObj[node.pre[0]],
end: this.indexObj[node.name],
label: \”\”
});
} else {
node.pre.map(v => {
brr.push({
start: this.indexObj[v],
end: this.indexObj[node.name],
label: \”\”
});
});
}
}
return brr;
},

完整代码:

<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\’,
props: {
tableList: {
type: Array,
default: []
}
},
data() {
return {
currentNode: {
id: null,
nodeName: \’\’,
},
nodes: [],
edges: [],
indexObj: {},
// nodes: [
// {id: 0,nodeName: \”A\”,shape: \”rect\”},
// {id: 1,nodeName: \”B\”,shape: \”diamond\”},
// {id: 2,nodeName: \”C\”,shape: \”rect\”},
// {id: 3,nodeName: \”D\”,shape: \”rect\”},
// {id: 4,nodeName: \”E\”,shape: \”rect\”},
// {id: 5,nodeName: \”F\”,shape: \”rect\”}
// ],
// edges: [
// {start: 0,end: 1,label: \”哈哈\”},
// {start: 1,end: 2,label: \”\”},
// {start: 1,end: 3,label: \”\”},
// {start: 2,end: 4,label: \”\”},
// {start: 3,end: 5,label: \”\”},
// {start: 4,end: 5,label: \”\”}
// ],
};
},
mounted() {
// 把表格的数据转成节点和线条
this.changeData();
// this.draw();
},
methods: {
async changeData() {
// 给每个节点设置对应的编号
this.tableList.map((v, i) => {
this.indexObj[v.name] = i;
});
await this.tableList.map(async (v, i) => {
// 点
this.nodes.push({
id: i,
nodeName: v.name,
shape: \”rect\”
});
// 线
let arr = await this.getLine(v);
this.edges = this.edges.concat(arr);
});
this.draw();
},
getLine(node) {
let brr = [];
if (node.pre.length) {
if (node.pre.length === 1) {
brr.push({
start: this.indexObj[node.pre[0]],
end: this.indexObj[node.name],
label: \”\”
});
} else {
node.pre.map(v => {
brr.push({
start: this.indexObj[v],
end: this.indexObj[node.name],
label: \”\”
});
});
}
}
return brr;
},
// 绘制简单的流程图
draw() {
// 创建 Graph 对象
const g = new dagreD3.graphlib.Graph().setGraph({
rankdir: \’LR\’, // 流程图从下向上显示,默认\’TB\’,可取值\’TB\’、\’BT\’、\’LR\’、\’RL\’
}).setDefaultEdgeLabel(function () {
return {};
});

// Graph添加节点
this.nodes.forEach(node => {
g.setNode(node.id, {
id: node.id,
label: node.nodeName,
shape: node
.shape, //节点形状,可以设置rect(长方形),circle,ellipse(椭圆),diamond(菱形) 四种形状,还可以使用render.shapes()自定义形状
style: \’fill:#fff;stroke:#70baff\’, //节点样式,可设置节点的颜色填充、节点边框 fill:#61b2e4;stroke:#fff
labelStyle: \’fill: #000;font-weight:bold\’, //节点标签样式, 可设置节点标签的文本样式(颜色、粗细、大小)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, {
label: edge.label, //边标签
style: \’stroke: #70baff; fill: none; stroke-width: 2px\’, // 连线样式
arrowheadStyle: \’fill: #70baff;stroke: #70baff;\’, //箭头样式,可以设置箭头颜色
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 => {
if (e.target.nodeName === \”rect\”) {
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>

四、效果展示

vue使用dagre-d3画流程图的完整代码

五、节点点击事件

需求:点击某个节点,修改节点样式,再次点击恢复原来的样式

代码很简单,只需要在流程图绘制好后加上如下代码即可

d3.selectAll(\’.node\’).on(\’mousedown\’, (e) => {
if(e.target.nodeName === \”rect\”) {
if(e.target.style.fill === \”rgb(97, 178, 228)\”) {
e.target.style = \”fill:#877ee1;stroke:#fff\”;
} else {
e.target.style = \”fill:#61b2e4;stroke:#fff\”;
}
}
});

tips:代码里我们设置的颜色是十六进制,但是经过插件绘制后转成了rgb格式,所以在比较的时候要用设置颜色的rgb格式比较

vue使用dagre-d3画流程图的完整代码

总结

到此这篇关于vue使用dagre-d3画流程图的文章就介绍到这了,更多相关vue dagre-d3画流程图内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • GOJS+VUE实现流程图效果
  • Vue3中的执行流程思路分析-流程图
  • vue+gojs实现拖拽流程图效果
  • vue3中如何使用d3.js绘制流程图(TS语法)

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript vue使用dagre-d3画流程图的完整代码 https://www.u-9.cn/biancheng/javascript/182402.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务