vue + antv g6实现拓扑图（用来做数据血缘展示业务）

最新推荐文章于 2025-02-26 17:45:09 发布

O3ohn

最新推荐文章于 2025-02-26 17:45:09 发布

阅读量1w

点赞数 6

分类专栏： antv g6 文章标签： vue

本文链接：https://blog.youkuaiyun.com/ka_xingl/article/details/118481691

版权

本文档详细介绍了如何使用 AntV G6 搭建数据血缘图，包括自定义 DOM 节点以满足动态数据需求，解决节点定位问题，以及实现节点和边的点击事件处理。在布局方面，采用了 dagre 层次布局，并探讨了在交互模式下遇到的问题及解决方案。此外，还涉及了如何销毁画布以及在每次请求数据前的处理逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方文档

官方文档链接（看完之后的感觉是我懂了，但没完全懂。）

具体使用

业务需求

在这里插入图片描述

做数据血缘，大概类似做ER图吧，一开始想使用echarts拓扑图来做，但是echarts有个定位问题一直没弄明白，找不到办法解决，echarts的节点需要自定义位置，但是我们是动态数据，且力引导算法不满足业务需求，所以最后选择了antv g6。

主要问题

1、需要自定义节点，g6使用自定义dom节点满足改需求，但是根据文档提供，dom节点无法使用g6提供的点击事件。

在这里插入图片描述

通过配置节点type,使节点指向某自定义节点。

// 当前节点高亮 通过type匹配自定义节点
if (this.data.nodes[i].highLight == 1) {
	this.data.nodes[i].type = 'center'
} else {
	this.data.nodes[i].type = 'dom-node'
}

自定义dom节点

G6.registerNode(
	'dom-node', {
		draw: (cfg, group) => {
			// console.log(cfg, group)
			const shape = group.addShape('dom', {
				attrs: {
					width: cfg.size[0],
					height: cfg.size[1],
					// 传入 DOM 的 html
					html: `
					<div onclick="select(${cfg.name})" id="${cfg.select}" class="dom-node-style" style="cursor:pointer; border-radius: 5px; width: ${
					  cfg.size[0] - 5
					}px; height: ${cfg.size[1] - 5}px; display: flex;">
					  
					  <span style="margin:auto; padding:auto; color: #000">${cfg.id}</span>
					</div> `,
				},

				draggable: true,
			});
			return shape;
		},
	},
	'single-node',
);
// 当前表节点
G6.registerNode(
	'center', {
		draw: (cfg, group) => {
			// console.log(cfg)
			const shape = group.addShape('dom', {
				attrs: {
					width: cfg.size[0],
					height: cfg.size[1],
					// 传入 DOM 的 html   ${cfg.isActive ? "class='selected-style'" : "class='node-style'"}"
					html: `    
						<div onclick="select(${cfg.name})" id="${cfg.select}" class="node-style" style="width: ${
						  cfg.size[0] - 5
						}px; height: ${cfg.size[1] - 5}px; display: flex;border-radius: 5px;cursor:pointer;">
						  <span style="margin:auto; padding:auto; color: #000">${cfg.id}<

最低0.47元/天解锁文章