vue3使用AntV G6 (图可视化引擎)历程[一]

2024-01-24 20:04

本文主要是介绍vue3使用AntV G6 (图可视化引擎)历程[一],希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言:G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等基础的图可视化能力。旨在让关系变得透明,简单。让用户获得关系数据的 Insight。

一、前期准备

官网地址:https://g6-next.antv.antgroup.com/manual/introduction

安装:

# 备注:目前最新版本是 4.x ,可以直接安装yarn add @antv/g6 或 npm install --save @antv/g6,如果指定最新版本,则如下安装
# 使用 npm 安装
npm install --save @antv/g6@5.0.0-beta.28# 使用 yarn 安装
yarn add @antv/g6@5.0.0# 本项目安装版本"@antv/g6": "^4.8.24",

引入:

import G6 from '@antv/g6'

二、基本树图绘制案例

1. 组件抽离【Topology.vue】
<template><div :id="domId" class="w-full h-[95%]"></div>
</template>
<script setup lang="ts">
import { initData } from '@/common/constants/topologyData/initRender'
import G6 from '@antv/g6'
import { nextTick, onMounted } from 'vue'const props = defineProps({domId: {type: String,default: 'container',},
})
const initRender = () => {const container = document.getElementById(props.domId)const width = container?.scrollWidthconst height = container?.scrollHeightconst graph = new G6.TreeGraph({container: props.domId,width,height,modes: {default: [{type: 'collapse-expand',onChange: function onChange(item, collapsed) {const data = item?.get('model')data.collapsed = collapsedreturn true},},'drag-canvas','zoom-canvas',],},defaultNode: {size: 26,anchorPoints: [[0, 0.5],[1, 0.5],],},defaultEdge: {type: 'cubic-horizontal',},layout: {type: 'dendrogram',direction: 'LR', // H / V / LR / RL / TB / BTnodeSep: 30,rankSep: 100,},})graph.node(function (node) {return {label: node.id,labelCfg: {position: node.children && node.children.length > 0 ? 'left' : 'right',offset: 5,},}})graph.data(initData)graph.render()graph.fitView()if (typeof window !== 'undefined')window.onresize = () => {if (!graph || graph.get('destroyed')) returnif (!container || !container.scrollWidth || !container.scrollHeight) returngraph.changeSize(container.scrollWidth, container.scrollHeight)}
}
onMounted(() => {nextTick(() => {initRender()})
})
</script>
2. 数据格式
export const initData = {id: 'Modeling Methods',children: [{id: 'Classification',children: [{id: 'Logistic regression',},],},{id: 'Consensus',children: [{id: 'Models diversity',children: [{id: 'Different initializations',},{id: 'Different parameter choices',},],},{id: 'Methods',children: [{id: 'Classifier selection',},{id: 'Classifier fusion',},],},],},],
}
3.组件调用
 <TopologyBase  domId="featureTreeInfoContainer" />
4.案例效果

在这里插入图片描述

三、绘制过程及官网案例

1.创建容器

需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器,通常为 div 标签。G6 在绘制时会在该容器下追加 canvas 标签,然后将图绘制在其中。

// 挂载节点
<template><div id="mountNode"></div>
</template>
2.数据准备

引入 G6 的数据源为 JSON 格式的对象。该对象中需要有节点(nodes)和边(edges)字段,分别用数组表示:

const data = {// 点集nodes: [{id: 'node1', // String,该节点存在则必须,节点的唯一标识x: 100, // Number,可选,节点位置的 x 值y: 200, // Number,可选,节点位置的 y 值},{id: 'node2', // String,该节点存在则必须,节点的唯一标识x: 300, // Number,可选,节点位置的 x 值y: 200, // Number,可选,节点位置的 y 值},],// 边集edges: [{source: 'node1', // String,必须,起始点 idtarget: 'node2', // String,必须,目标点 id},],
};
3.创建关系图

创建关系图(实例化)时,至少需要为图设置容器、宽和高。

const graph = new G6.Graph({container: 'mountNode', // String | HTMLElement,必须,在 Step 1 中创建的容器 id 或容器本身width: 800, // Number,必须,图的宽度height: 500, // Number,必须,图的高度
});
4.配置数据源,渲染
graph.data(data); // 读取 第2步 中的数据源到图上
graph.render(); // 渲染图
5. 最终结果

在这里插入图片描述

6. 完整代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Tutorial Demo</title></head><body>/* 图的画布容器 */<div id="mountNode"></div>/* 引入 G6 */<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js"></script><script>// 定义数据源const data = {// 点集nodes: [{id: 'node1',x: 100,y: 200,},{id: 'node2',x: 300,y: 200,},],// 边集edges: [// 表示一条从 node1 节点连接到 node2 节点的边{source: 'node1',target: 'node2',},],};// 创建 G6 图实例const graph = new G6.Graph({container: 'mountNode', // 指定图画布的容器 id,与第 9 行的容器对应// 画布宽高width: 800,height: 500,});// 读取数据graph.data(data);// 渲染图graph.render();</script></body>
</html>

这篇关于vue3使用AntV G6 (图可视化引擎)历程[一]的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

python使用watchdog实现文件资源监控

《python使用watchdog实现文件资源监控》watchdog支持跨平台文件资源监控,可以检测指定文件夹下文件及文件夹变动,下面我们来看看Python如何使用watchdog实现文件资源监控吧... python文件监控库watchdogs简介随着Python在各种应用领域中的广泛使用,其生态环境也

Python中构建终端应用界面利器Blessed模块的使用

《Python中构建终端应用界面利器Blessed模块的使用》Blessed库作为一个轻量级且功能强大的解决方案,开始在开发者中赢得口碑,今天,我们就一起来探索一下它是如何让终端UI开发变得轻松而高... 目录一、安装与配置:简单、快速、无障碍二、基本功能:从彩色文本到动态交互1. 显示基本内容2. 创建链

springboot整合 xxl-job及使用步骤

《springboot整合xxl-job及使用步骤》XXL-JOB是一个分布式任务调度平台,用于解决分布式系统中的任务调度和管理问题,文章详细介绍了XXL-JOB的架构,包括调度中心、执行器和Web... 目录一、xxl-job是什么二、使用步骤1. 下载并运行管理端代码2. 访问管理页面,确认是否启动成功

使用Nginx来共享文件的详细教程

《使用Nginx来共享文件的详细教程》有时我们想共享电脑上的某些文件,一个比较方便的做法是,开一个HTTP服务,指向文件所在的目录,这次我们用nginx来实现这个需求,本文将通过代码示例一步步教你使用... 在本教程中,我们将向您展示如何使用开源 Web 服务器 Nginx 设置文件共享服务器步骤 0 —

Java中switch-case结构的使用方法举例详解

《Java中switch-case结构的使用方法举例详解》:本文主要介绍Java中switch-case结构使用的相关资料,switch-case结构是Java中处理多个分支条件的一种有效方式,它... 目录前言一、switch-case结构的基本语法二、使用示例三、注意事项四、总结前言对于Java初学者

Golang使用minio替代文件系统的实战教程

《Golang使用minio替代文件系统的实战教程》本文讨论项目开发中直接文件系统的限制或不足,接着介绍Minio对象存储的优势,同时给出Golang的实际示例代码,包括初始化客户端、读取minio对... 目录文件系统 vs Minio文件系统不足:对象存储:miniogolang连接Minio配置Min

使用Python绘制可爱的招财猫

《使用Python绘制可爱的招财猫》招财猫,也被称为“幸运猫”,是一种象征财富和好运的吉祥物,经常出现在亚洲文化的商店、餐厅和家庭中,今天,我将带你用Python和matplotlib库从零开始绘制一... 目录1. 为什么选择用 python 绘制?2. 绘图的基本概念3. 实现代码解析3.1 设置绘图画

使用Python实现大文件切片上传及断点续传的方法

《使用Python实现大文件切片上传及断点续传的方法》本文介绍了使用Python实现大文件切片上传及断点续传的方法,包括功能模块划分(获取上传文件接口状态、临时文件夹状态信息、切片上传、切片合并)、整... 目录概要整体架构流程技术细节获取上传文件状态接口获取临时文件夹状态信息接口切片上传功能文件合并功能小

Golang使用etcd构建分布式锁的示例分享

《Golang使用etcd构建分布式锁的示例分享》在本教程中,我们将学习如何使用Go和etcd构建分布式锁系统,分布式锁系统对于管理对分布式系统中共享资源的并发访问至关重要,它有助于维护一致性,防止竞... 目录引言环境准备新建Go项目实现加锁和解锁功能测试分布式锁重构实现失败重试总结引言我们将使用Go作

Linux使用nohup命令在后台运行脚本

《Linux使用nohup命令在后台运行脚本》在Linux或类Unix系统中,后台运行脚本是一项非常实用的技能,尤其适用于需要长时间运行的任务或服务,本文我们来看看如何使用nohup命令在后台... 目录nohup 命令简介基本用法输出重定向& 符号的作用后台进程的特点注意事项实际应用场景长时间运行的任务服