vue3中使用antv-X6实现关系图

2023-12-06 16:12

本文主要是介绍vue3中使用antv-X6实现关系图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

先看效果图:

1、安装 npm install@antv/x6 --save

这里使用的X6中自定义节点的方式实现的,项目目录如下,hooks里面存放一些函数和变量

nodes里面是自定义节点的页面,最外围的index.vue就是主渲染页面

2、testSh/index.vue

注意:

(1)代码如下,里面有个useMouse()函数,追踪鼠标位置,这个需要项目中安装vueuse,可以查看下面文章去自行安装,Vueuse中文文档详解_笔记大全_设计学院

<template><div class="w-full h-full"><div class="centerPart w-full h90%"><div id="container" ref="containerRef"></div></div></div>
</template><script setup lang="ts">
import {messageWarning,
} from "@/utils/element-utils/notification-common";
import { Graph } from "@antv/x6";
import { register } from "@antv/x6-vue-shape";
import { DagreLayout } from "@antv/layout";
import type { Edge } from "@antv/x6";
import { edgeStyle, setEdge, ILink, Data } from "./hooks/comGraph";
import GraphNode from "./nodes/index.vue";const graph = ref<Graph>(); //graph实例
const containerRef = ref(); //graph容器ref实例
let nodes: any = ref([]);
let edges: any = ref([]);
const myLinks = ref<any>([]); //保存我的所有边onMounted(() => {getNodeList();
});
// 获取节点和边
const getNodeList = async () => {let { tables, links } = Data;nodes.value = tables;links.forEach((aa: any, i: any) => {aa.modelId = aa.modelId + i;});edges.value = links;myLinks.value = links;init();
};
// 放大缩小zoom
const resizeGraph = (val: string) => {val == "add" ? graph.value?.zoom(0.1) : graph.value?.zoom(-0.1);
};
// graph初始化
const init = () => {const data: any = {nodes: [],edges: [],};register({shape: "custom-node",width: 250,height: 150,component: GraphNode,});// 添加节点nodes.value.forEach((item: any, i: string) => {data.nodes!.push({id: item?.path,shape: "custom-node",label: item?.name,data: {...item,toolClickEvent: nodeClickCallback, //结点操作回调事件}, //向节点组件传递数据或者方法});});// 添加边edges.value.forEach((item: any, i: string) => {data.edges!.push({source: item.sourcePath,target: item.targetPath,...edgeStyle,});});// 初始化实例graph.value = new Graph({container: document.getElementById("container")!,//对画布进行缩放mousewheel: {enabled: true, //是否开启滚轮缩放交互maxScale: 2, //缩放的倍数minScale: 0.1, //缩放的最小倍数},autoResize: true, //设置撑开屏幕panning: true,background: {color: "#F7FAFD",},onEdgeLabelRendered: (args) => {const { selectors, edge } = args as anyconsole.log(selectors, edge, '------------');},});// 基本布局,从左向右const dagreLayout = new DagreLayout({type: "dagre",rankdir: "LR",align: "UL",ranksep: 150,nodesep: 100,});const model: any = dagreLayout.layout(data);graph.value.fromJSON(model);// 监听节点的点击事件,点击进行连线graph.value.on("node:click", ({ node }) => {node.toFront();// 创建连线终点通过点击节点确定// 当起点存在时,表明创建终点if (tempSourceID) {createLink(node);}});
};
// 节点的tool工具函数,编辑关联和删除
const nodeClickCallback = (type: string, node: any) => {switch (type) {case "edit":changeEdit(node);break;case "remove":changeRemove(node);break;case "link":createLink(node);break;}
};
// 节点编辑
const changeEdit = (node: any) => { };
// 节点删除
const changeRemove = (node: any) => { };
//---------------------------------创建关联线--------------------------------------
// 创建关联
let tempSourceID: string = ""; //关联线起点暂存id
let tempSourceData: any; //关联线起点暂存数据
let tempEdge: Edge; //暂存edge实例
const { x, y } = useMouse();
// 鼠标动作追踪
const handleMouseMove = () => {if (!tempSourceID) {return;}let local = graph.value!.pageToLocal(x.value, y.value);// 链接到边,减的数字是坐标终点距离鼠标小手的位置,减值越大,离的越远// setTarget获取链接到画布的终止点tempEdge.setTarget({ x: local.x - 15, y: local.y - 15 });
};const createLink = (node: any) => {if (!tempSourceID) {//起始点为空,就创建起始点// 设置初始点idtempSourceID = node.id;tempSourceData = node.data;if (graph.value) {let local = graph.value.pageToLocal(x.value, y.value);// 添加edgetempEdge = graph.value?.addEdge({source: { cell: tempSourceID },target: { x: local.x, y: local.y },...edgeStyle,});}// 监听鼠标移动事件document.addEventListener("mousemove", handleMouseMove);} else {//否则存在起点的话就创建终点cancleLink();if (tempSourceID === node.id) {messageWarning("不可与自身创建关联!");} else {// some数组中至少存在一个元素满足指定条件// 判断节点的起点和终点都对应上才返回trueconst isExist = myLinks.value.some((e: any) => {return ((e["sourcePath"] == tempSourceID && e["targetPath"] == node.id) ||(e["sourcePath"] == node.id && e["targetPath"] == tempSourceID));});if (isExist) {messageWarning("已存在关系");} else {// 创建节点if (graph.value) {console.log(12121, "------------");tempEdge = graph.value.addEdge(setEdge(tempSourceID, node.id, true));const newLink: ILink = {sourceModelId: tempSourceData.modelId,targetModelId: node.data.modelId,mainField: "",type: "1",unionType: "inner",sourceField: "",targetField: "",sourcePath: tempSourceData["path"],targetPath: node.data["path"],sourceTable: tempSourceData.code,targetTable: node.data.code,};myLinks.value.push(newLink);}}// 重置暂存标志位tempSourceID = "";}}
};// 取消连线
const cancleLink = (edge: Edge = tempEdge) => {console.log(edge, "------------");if (!edge) return;graph.value?.removeEdge(edge.id);// 监听鼠标移动事件移除document.removeEventListener("mousemove", handleMouseMove);
};
const saveModel = () => {// 拿到所有的线条关系console.log(myLinks.value, "------------");
};
</script><style scoped lang="scss">
#container {height: 100%;position: relative;.footTool {position: absolute;bottom: 0;background-color: #f6f9fc;height: 10%;}
}
</style>

3、node/index.vue

这个是自定义节点页面,定义好之后,在主页面中进行引入

<template><div class="node"><div><div class="flex topttitle pd-10"><svg width="20px" height="20px" viewBox="0 0 20 20" :style="{ 'margin-top': '5px' }"><g fill="#be49e7"><pathd="M13.6149425,0 C14.5639836,0 15.3333333,0.769349769 15.3333333,1.7183908 L15.3333333,13.6149425 C15.3333333,14.5639836 14.5639836,15.3333333 13.6149425,15.3333333 L1.7183908,15.3333333 C0.769349769,15.3333333 0,14.5639836 0,13.6149425 L0,1.7183908 C0,0.769349769 0.769349769,0 1.7183908,0 L13.6149425,0 Z M6.4916986,8.2247765 L3.3584504,8.2247765 C3.01776901,8.2247765 2.74159217,8.50095334 2.74159217,8.84163474 L2.74159217,11.9748829 C2.74159217,12.3155643 3.01776901,12.5917412 3.3584504,12.5917412 L6.4916986,12.5917412 C6.83237999,12.5917412 7.10855683,12.3155643 7.10855683,11.9748829 L7.10855683,8.84163474 C7.10855683,8.50095334 6.83237999,8.2247765 6.4916986,8.2247765 Z M11.9748829,11.3580247 L8.84163474,11.3580247 C8.50095334,11.3580247 8.2247765,11.6342015 8.2247765,11.9748829 C8.2247765,12.3155643 8.50095334,12.5917412 8.84163474,12.5917412 L11.9748829,12.5917412 C12.3155643,12.5917412 12.5917412,12.3155643 12.5917412,11.9748829 C12.5917412,11.6342015 12.3155643,11.3580247 11.9748829,11.3580247 Z M11.9748829,8.61643252 L8.84163474,8.61643252 C8.50095334,8.61643252 8.2247765,8.89260936 8.2247765,9.23329076 C8.2247765,9.57397216 8.50095334,9.850149 8.84163474,9.850149 L11.9748829,9.850149 C12.3155643,9.850149 12.5917412,9.57397216 12.5917412,9.23329076 C12.5917412,8.89260936 12.3155643,8.61643252 11.9748829,8.61643252 Z M6.4916986,2.74159217 L3.3584504,2.74159217 C3.01776901,2.74159217 2.74159217,3.01776901 2.74159217,3.3584504 L2.74159217,6.4916986 C2.74159217,6.83237999 3.01776901,7.10855683 3.3584504,7.10855683 L6.4916986,7.10855683 C6.83237999,7.10855683 7.10855683,6.83237999 7.10855683,6.4916986 L7.10855683,3.3584504 C7.10855683,3.01776901 6.83237999,2.74159217 6.4916986,2.74159217 Z M11.9748829,5.48318433 L8.84163474,5.48318433 C8.50095334,5.48318433 8.2247765,5.75936117 8.2247765,6.10004257 C8.2247765,6.44072397 8.50095334,6.71690081 8.84163474,6.71690081 L11.9748829,6.71690081 C12.3155643,6.71690081 12.5917412,6.44072397 12.5917412,6.10004257 C12.5917412,5.75936117 12.3155643,5.48318433 11.9748829,5.48318433 Z M11.9748829,2.74159217 L8.84163474,2.74159217 C8.50095334,2.74159217 8.2247765,3.01776901 8.2247765,3.3584504 C8.2247765,3.6991318 8.50095334,3.97530864 8.84163474,3.97530864 L11.9748829,3.97530864 C12.3155643,3.97530864 12.5917412,3.6991318 12.5917412,3.3584504 C12.5917412,3.01776901 12.3155643,2.74159217 11.9748829,2.74159217 Z"id="形状结合"></path></g></svg><h1 class="head-name">{{ data.name }}</h1><div class="head-tool"><ElDropdown trigger="click" :teleported="true"><BIcon size="20"><BSvg name="wenjianjiabeifen11" /></BIcon><template #dropdown><ElDropdownMenu><ElDropdownItem @click="operateFunc('edit')">编辑</ElDropdownItem><ElDropdownItem @click="operateFunc('link')">创建关联</ElDropdownItem><ElDropdownItem @click="operateFunc('remove')">删除</ElDropdownItem></ElDropdownMenu></template></ElDropdown></div></div><h6 class="secondTitle">({{ data.path }})</h6></div><div class="content"><div class="flex field-item" v-for="(item, i) in data.fields" :key="i"><span>{{ i + 1 }}.{{ item.name }}</span><span>{{ item.code }}</span></div></div></div>
</template><script setup lang="ts">
const getNode: any = inject("getNode");
const node: any = getNode(); //当前节点
let data = ref<any>(node.getData()); //当前节点数据const operateFunc = (type: string) => {data.value.toolClickEvent(type, node);console.log(data.value, "------------");
};
onMounted(() => {});
</script><style scoped lang="scss">
.node {width: 250px;height: 150px;background: #fff;display: flex;z-index: 1000 !important;flex-direction: column;box-shadow: rgb(233, 170, 255) 0px 0px 6px 0px;.topttitle {padding: 12px;padding-bottom: 0;height: 40px;position: relative;.head-tool {position: absolute;right: 0;z-index: 100;cursor: pointer;}}.head-name {color: #000000;font-size: 18px;line-height: 25px;font-weight: bold;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-left: 10px;}.secondTitle {color: #999;font-size: 14px;line-height: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-left: 40px;padding-bottom: 10px;font-weight: normal;border-bottom: 1px solid #e0e7ed;}.content {flex: 1;overflow: auto;cursor: pointer;}.field-item {height: 27px;font-size: 14px;padding: 12px;display: flex;align-items: center;span:nth-child(1) {display: block;width: 50%;}span:nth-child(2) {color: #697a8f;}}
}
</style>

 4、hooks/comGraph.ts

存放一些静态变量

// 线的样式
export const edgeStyle = {attrs: {line: {stroke: "rgb(26, 97, 211)", //线条颜色strokeWidth: 1, //线条粗细targetMarker: null, //不设置箭头},},allowNode: true,snap: true,allowLoop: false,router: {// 路由类型 normal orth(正交路由)name: "manhattan", //智能正交,自动避开障碍args: {step: 70,padding: 50,offset: 24,},},allowMulti: true,connector: {name: "jumpover",args: {radius: 14,},},
};
// 设置线
export const setEdge = (source: string, target: string, showLable: boolean) => {return {shape: "double-edge",source: { cell: source },target: { cell: target },label: showLable ? [] : "",...edgeStyle,};
};
//线和节点数据
export const Data = {"tables": [{"name": "产品线","path": "productlines","fields": [{"code": "productLine","name": "主键",},{"code": "textDescription","name": "纯文本描述",}]},{"name": "客户表","path": "customers","fields": [{"code": "phone","name": "联系电话",},{"code": "addressLine1","name": "联系地址1",},{"code": "addressLine2","name": "联系地址2",},{"code": "city","name": "所在城市",},{"code": "state","name": "州",},]},{"name": "订单表","path": "orders","fields": [{"code": "orderDate","name": "下单日期",},{"code": "requiredDate","name": "需用日期",},{"code": "shippedDate","name": "发货日期",},{"code": "status","name": "状态",},]},{"name": "订单明细表","path": "orderdetails","fields": [{"code": "orderNumber","name": "订单编号",},{"code": "productCode","name": "产品编号",},]},{"name": "员工表","path": "employees","fields": [{"code": "employeeNumber","name": "员工编号",},{"code": "lastName","name": "姓",},{"code": "firstName","name": "名",},{"code": "extension","name": "分机号",},{"code": "email","name": "电子邮件",},]},{"name": "付款","path": "payments","fields": [{"code": "customerNumber","name": "客户编号",},{"code": "checkNumber","name": "检验数",},{"code": "paymentDate","name": "付款日",},{"code": "amount","name": "金额",}]},{"name": "产品","path": "products","fields": [{"code": "productCode","name": "产品编码",},{"code": "productName","name": "产品名称",},{"code": "productLine","name": "产品线",},{"code": "productScale","name": "生产规模",}]}],"links": [{"sourcePath": "orders","targetPath": "customers",},{"sourcePath": "payments","targetPath": "customers",},{"sourcePath": "customers","targetPath": "employees",},{"sourcePath": "orderdetails","targetPath": "products",},{"sourcePath": "orderdetails","targetPath": "orders",},{"sourcePath": "products","targetPath": "productlines",}]
}

有问题的可以评论区讨论~ 

这篇关于vue3中使用antv-X6实现关系图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/462446

相关文章

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

Python使用vllm处理多模态数据的预处理技巧

《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP

C#中Guid类使用小结

《C#中Guid类使用小结》本文主要介绍了C#中Guid类用于生成和操作128位的唯一标识符,用于数据库主键及分布式系统,支持通过NewGuid、Parse等方法生成,感兴趣的可以了解一下... 目录前言一、什么是 Guid二、生成 Guid1. 使用 Guid.NewGuid() 方法2. 从字符串创建

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合