先看效果,点击目标节点,可显示节点上游及下游节点:
首先安装D3依赖:
npm install d3
npm install dagre-d3
话不多说,直接上代码:
<template>
<div style="display: flex; align-items: center">
<div style="border: 1px solid #ccc; padding: 20px; width: 1500px">
<svg class="dagre" width="1500" height="800">
<g class="container"></g>
</svg>
</div>
<div
style="border: 1px solid #ccc; padding: 20px; width: 300px; height: 800px"
>
id:{{ nodeInfo?.id }} == name:{{ nodeInfo?.nodeName }}
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import dagreD3 from "dagre-d3";
import * as d3 from "d3";
const nodeInfo = ref();
const nodes = ref();
// 节点数组
nodes.value = [
{
id: 0,
name: "xxx模型",
nodeName: "REP_SAJ_SALJAS_SAL",
type: "DWO",
release: "已发布",
time: "2023-12-12 19:12:12",
},
{
id: 1,
name: "xxx模型",
nodeName: "REP_SAJ_SALJAS_SAL",
type: "DWS",
release: "未发布",
time: "2023-12-12 19:12:12",
},
{
id: 2,
name: "xxx模型",
nodeName: "REP_SAJ_SALJAS_SAL",
type: "DIM",
release: "已发布",
time: "2023-12-12 19:12:12",
},
{
id: 3,
name: "xxx模型",
nodeName: "REP_SAJ_SALJAS_SAL",
type: "DWO",
release: "已发布",
time: "2023-12-12 19:12:12",
},
{
id: 4,
name: "xxx模型",
nodeName: "REP_SAJ_SALJAS_SAL",
type: "DIM",
release: "已发布",
time: "2023-12-12 19:12:12",
},
{
id: 5,
name: "xxx模型",
nodeName: "REP_SAJ_SALJAS_SAL",
type: "DWD",
release: "已发布",
time: "2023-12-12 19:12:12",
},
{
id: 6,
name: "xxx模型",
nodeName: "REP_SAJ_SALJAS_SAL",
type: "DWS",
release: "已发布",
time: "2023-12-12 19:12:12",
},
{
id: 7,
name: "xxx模型",
nodeName: "REP_SAJ_SALJAS_SAL",
type: "DWO",
release: "已发布",
time: "2023-12-12 19:12:12",
},
{
id: 8,
name: "xxx模型",
nodeName: "REP_SAJ_SALJAS_SAL",
type: "DWO",
release: "已发布",
time: "2023-12-12 19:12:12",
},
{
id: 9,
name: "xxx模型",
nodeName: "REP_SAJ_SALJAS_SAL",
type: "DWS",
release: "未发布",
time: "2023-12-12 19:12:12",
},
{
id: 10,
name: "xxx模型",
nodeName: "REP_SAJ_SALJAS_SAL",
type: "DWD",
release: "已发布",
time: "2023-12-12 19:12:12",
},
{
id: 11,
name: "xxx模型",
nodeName: "REP_SAJ_SALJAS_SAL",
type: "DWS",
release: "未发布",
time: "2023-12-12 19:12:12",
},
{
id: 12,
name: "xxx模型",
nodeName: "REP_SAJ_SALJAS_SAL",
type: "ADS",
release: "未发布",
time: "2023-12-12 19:12:12",
},
];
const edges = ref();
// 连线数组
edges.value = [
{
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,
},
];
const draw = () => {
// 创建 Graph 对象
const g = new dagreD3.graphlib.Graph()
.setGraph({
zoom: 1,
rankdir: "LR", // 流程图从下向上显示,默认'TB',可取值'TB'、'BT'、'LR'、'RL'
//ranker: "network-simplex",//连线算法
// nodesep: 70, // 节点之间间距
// ranksep: 100, // 层与层之间的间距
})
.setDefaultEdgeLabel(function () {
return {};
});
const releaseClass = (node) => {
return node == "已发布" ? "ADS" : "DWD";
};
nodes.value.forEach((node) => {
g.setNode(node.id, {
id: node.id,
label: `<foreignObject id='${node.id}' width='300' height='80'>
<div id='${
node.id
}' xmlns='http://www.w3.org/1999/xhtml' style='width:300px; height: 80px'>
<div id='${node.id}' class='nodeBox'>
<span id='${node.id}' class='nodeA'>${node.name}</span>
<div id='${node.id}' class='${node.type}'>${node.type}</div>
</div>
<div id='${node.id}' class='nodeBox' style='margin-top:5px'>
<span id='${node.id}' class='nodeA'>${node.nodeName}</span>
<span id='${node.id}' class='${releaseClass(node.release)}'>${
node.release
}</span>
</div>
<div id='${node.id}' style='margin-top:5px'>
<span id='${node.id}' class='nodeA'>最后执行时间:${
node.time
}</span>
</div>
</div>
</foreignObject>`, //node.nodeName,
labelType: "html",
width: 320,
height: 86,
// shape: "rect", //节点形状,可以设置rect(长方形),circle,ellipse(椭圆),diamond(菱形) 四种形状,还可以使用render.shapes()自定义形状
style: "fill:#fff;stroke:#a0cfff;stroke-width: 2px;cursor: pointer", //节点样式,可设置节点的颜色填充、节点边框
labelStyle: "fill: #fff;font-weight:bold;cursor: pointer", //节点标签样式, 可设置节点标签的文本样式(颜色、粗细、大小)
rx: 5, // 设置圆角
ry: 5, // 设置圆角
// paddingBottom: 0,
// paddingLeft: 0,
// paddingRight: 0,
// paddingTop: 0,`
});
});
// Graph添加节点之间的连线
if (nodes.value.length > 1) {
edges.value.forEach((edge) => {
g.setEdge(edge.start, edge.end, {
//curve: d3.curveStepBefore , //d3.curveBasis, // 设置为贝塞尔曲线
style: "stroke: #0fb2cc; fill: none; stroke-width: 2px", // 连线样式
arrowheadStyle: "fill: #0fb2cc;stroke: #0fb2cc;", //箭头样式,可以设置箭头颜色
arrowhead: "vee", //箭头形状,可以设置 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");
var zoom = d3
.zoom() // 缩放支持
.scaleExtent([0.5, 2]) // 缩放范围
.on("zoom", function (current) {
container.attr("transform", current.transform);
});
svg.call(zoom); // 缩放生效
let { clientWidth, clientHeight } = svg._groups[0][0];
let { width, height } = g.graph();
let initScale = 1;
svg
.transition()
.duration(1000) // 1s完成过渡
.call(
zoom.transform,
d3.zoomIdentity // 居中显示
.translate(
(clientWidth - width * initScale) / 2,
(clientHeight - height * initScale) / 2
)
.scale(initScale) // 默认缩放比例
);
// 节点点击事件
let nowNode; // 标记当前高亮节点
container.on(
"click",
(e) => {
if (
Number(e.target.__data__) == nowNode ||
nowNode == Number(e.target.id)
) {
for (let a in g._nodes) {
g._nodes[a].style =
"fill:#fff;stroke:#a0cfff;stroke-width: 2px;cursor: pointer";
}
edges.value.forEach((edge) => {
g.setEdge(edge.start, edge.end, {
//curve: d3.curveStepBefore , //d3.curveBasis, // 设置为贝塞尔曲线
style: "stroke: #0fb2cc; fill: none; stroke-width: 2px", // 连线样式
arrowheadStyle: "fill: #0fb2cc;stroke: #0fb2cc;", //箭头样式,可以设置箭头颜色
arrowhead: "vee", //箭头形状,可以设置 normal,vee,undirected 三种样式,默认为 normal
});
});
nowNode = "";
render(container, g);
return;
}
nodes.value.forEach((item) => {
console.log(nowNode, item.id, "wwwwwwwww");
if (
item.id == Number(e.target.__data__) ||
item.id == Number(e.target.id)
) {
nowNode = item.id;
nodeInfo.value = item;
let edgeList = [
...getUpNode(item.id),
nowNode,
...getDownNode(item.id),
];
if (nodes.value.length > 1) {
edges.value.forEach((edge) => {
if (
edgeList.indexOf(edge.start) != -1 &&
edgeList.indexOf(edge.end) != -1
) {
g.setEdge(edge.start, edge.end, {
//curve: d3.curveStepBefore , //d3.curveBasis, // 设置为贝塞尔曲线
style: "stroke: red; fill: none; stroke-width: 2px", // 连线样式
arrowheadStyle: "fill: red;stroke: red;", //箭头样式,可以设置箭头颜色
arrowhead: "vee", //箭头形状,可以设置 normal,vee,undirected 三种样式,默认为 normal
});
} else {
g.setEdge(edge.start, edge.end, {
//curve: d3.curveStepBefore , //d3.curveBasis, // 设置为贝塞尔曲线
style: "stroke: #0fb2cc; fill: none; stroke-width: 2px", // 连线样式
arrowheadStyle: "fill: #0fb2cc;stroke: #0fb2cc;", //箭头样式,可以设置箭头颜色
arrowhead: "vee", //箭头形状,可以设置 normal,vee,undirected 三种样式,默认为 normal
});
}
});
}
for (let a in g._nodes) {
g._nodes[a].style =
"fill:#fff;stroke:#a0cfff;stroke-width: 2px;cursor: pointer";
}
g._nodes[nodeInfo.value.id].style =
"fill: #fff;stroke:#30a8ff;stroke-width: 2px;cursor: pointer";
getUpNode(item.id).forEach((item) => {
g._nodes[item].style =
"fill: #a0cfff;stroke:#a0cfff;stroke-width: 2px;cursor: pointer";
});
getDownNode(item.id).forEach((item) => {
g._nodes[item].style =
"fill: #a3da87;stroke:#a0cfff;stroke-width: 2px;cursor: pointer";
});
console.log(nodeInfo.value, g, 6666);
}
});
render(container, g);
},
true
);
// 获取上游节点函数
const getUpNode = (id) => {
let arr = [];
for (let i = 0; i < edges.value.length; i++) {
if (edges.value[i].end == Number(id)) {
arr.push(edges.value[i].start);
arr.push(...getUpNode(edges.value[i].start));
}
}
return arr;
};
// 获取下游节点函数
const getDownNode = (id) => {
let arr = [];
for (let i = 0; i < edges.value.length; i++) {
if (edges.value[i].start == Number(id)) {
arr.push(edges.value[i].end);
arr.push(...getDownNode(edges.value[i].end));
}
}
return arr;
};
};
onMounted(() => {
draw();
});
console.log(dagreD3, 2222);
</script>
<style>
.label-container {
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.nodeA {
color: #01579b;
font-family: HarmonyOS Sans SC;
font-size: 16px;
font-style: normal;
font-weight: 700;
}
.nodeBox {
display: flex;
justify-content: space-between;
}
.DWO {
padding: 0 7px;
color: #67c23a;
border-radius: 4px;
border: 1px solid #e1f3d8;
background: #f0f9eb;
}
.DIM {
padding: 0 7px;
color: #909399;
border-radius: 4px;
border: 1px solid #e9e9eb;
background: #f4f4f5;
}
.DWD {
padding: 0 7px;
color: #e6a23c;
border-radius: 4px;
border: 1px solid #faecd8;
background: #fcf6ec;
}
.DWS {
padding: 0 7px;
color: #f56c6c;
border-radius: 4px;
border: 1px solid #fde2e2;
background: #fef0f0;
}
.ADS {
padding: 0 7px;
color: #409eff;
border-radius: 4px;
border: 1px solid #d9ecff;
background: #ecf5ff;
}
</style>