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

上期回顾:历程[一]描述了基本的树状图的绘制,默认节点类型defaultNode中的type是circle,下面这篇描述的是节点抽离自定义节点并做数据静态渲染。
官网地址:https://g6-next.antv.antgroup.com/manual/introduction

一、案例效果

在这里插入图片描述

二、自定义节点渲染

1. 主要通过G6.registerNode实现自定义节点的配置,官网地址:https://g6.antv.antgroup.com/manual/middle/elements/nodes/custom-node
G6.registerNode('nodeName',{options: {style: {},stateStyles: {hover: {},selected: {},},},/*** 绘制节点,包含文本* @param  {Object} cfg 节点的配置项* @param  {G.Group} group 图形分组,节点中图形对象的容器* @return {G.Shape} 返回一个绘制的图形作为 keyShape,通过 node.get('keyShape') 可以获取。* 关于 keyShape 可参考文档 核心概念-节点/边/Combo-图形 Shape 与 keyShape*/draw(cfg, group) {},/*** 绘制后的附加操作,默认没有任何操作* @param  {Object} cfg 节点的配置项* @param  {G.Group} group 图形分组,节点中图形对象的容器*/afterDraw(cfg, group) {},/*** 更新节点,包含文本* @override* @param  {Object} cfg 节点的配置项* @param  {Node} node 节点*/update(cfg, node) {},/*** 更新节点后的操作,一般同 afterDraw 配合使用* @override* @param  {Object} cfg 节点的配置项* @param  {Node} node 节点*/afterUpdate(cfg, node) {},/*** 响应节点的状态变化。* 在需要使用动画来响应状态变化时需要被复写,其他样式的响应参见下文提及的 [配置状态样式] 文档* @param  {String} name 状态名称* @param  {Object} value 状态值* @param  {Node} node 节点*/setState(name, value, node) {},/*** 获取锚点(相关边的连入点)* @param  {Object} cfg 节点的配置项* @return {Array|null} 锚点(相关边的连入点)的数组,如果为 null,则没有控制点*/getAnchorPoints(cfg) {},},// 继承内置节点类型的名字,例如基类 'single-node',或 'circle', 'rect' 等// 当不指定该参数则代表不继承任何内置节点类型extendedNodeType,
);
2. 将渲染的节点转换为组件渲染

在 Vue3 中,你可以通过 G6 的自定义节点功能,并在 draw 方法中创建一个新的 Vue 实例,然后将 Vue 组件的 HTML 内容添加到 G6 节点中。以下是一个基本的示例:

<script setup lang="ts">
import { createApp, nextTick } from 'vue'
import G6 from '@antv/g6'
import YourComponent from './YourComponent.vue'G6.registerNode('vue-node', {draw: (cfg, group) => {const container = document.createElement('div')const app = createApp(YourComponent, { ...cfg })app.mount(container)let shapenextTick(() => {shape = group.addShape('dom', {attrs: {width: cfg.size[0],height: cfg.size[1],html: container.innerHTML,},name: 'dom-shape',})})return shape},
})
</script>

在这个示例中,我们创建了一个新的 Vue 实例,并将 YourComponent 组件挂载到一个新创建的 div 元素上。然后,我们在 Vue 的 nextTick 中,将这个 div 的 HTML 内容添加到 G6 节点的 dom 形状中。

然后,你可以在你的图中使用这个新注册的 ‘vue-node’ 节点类型:

<script setup lang="ts">
const graph = new G6.Graph({container: 'graph-container',width: 800,height: 600,defaultNode: {type: 'vue-node',size: [100, 100],},
})graph.data({nodes: [{ id: 'node1', x: 100, y: 100, label: 'Node 1' },{ id: 'node2', x: 200, y: 200, label: 'Node 2' },],edges: [{ source: 'node1', target: 'node2' },],
})graph.render()
</script>

在这个示例中,我们创建了一个新的 G6 图表,并设置了默认节点类型为 ‘vue-node’。然后,我们定义了图表的数据,并调用 graph.render() 方法来渲染图表。

三、组件抽离及案例代码

1. 基本的绘制组件 【TopologyBase.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 { createApp, nextTick, onMounted, ref, watch } from 'vue'
import StatusNode from './StatusNode.vue'const props = defineProps({domId: {type: String,default: 'container',},treeData: {type: Array,},
})
const initTreeData = ref(props.treeData)
G6.registerNode('dom-node',{draw(cfg: any, group) {let shapeconst container = document.createElement('div')const app = createApp(StatusNode, { domNodeMsg: { ...cfg } })app.mount(container)shape = group.addShape('dom', {attrs: {width: cfg.size[0],height: cfg.size[1],html: container.innerHTML,},name: 'dom-shape',})return shape},},'single-node',
)
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: ['drag-canvas', 'zoom-canvas', 'drag-node'],},defaultNode: {type: 'dom-node', // 矩形 rect/ 默认circlesize: [80, 30],anchorPoints: [[0, 0.5],[1, 0.5],],},fitCenter: true,renderer: 'svg',linkCenter: true,defaultEdge: {type: 'cubic-horizontal',/*  通过配置边的 style 属性来设置弯曲半径和到端节点的最小距离 */style: {radius: 5,offset: 10,endArrow: true,/* 设置其他样式 */stroke: '#2c3e50',},},layout: {type: 'compactBox',direction: 'LR',getId: function getId(d: { id: string }) {// 节点 id 的回调函数return d.id},getHeight: function getHeight() {// 每个节点的高度return 16},getWidth: function getWidth() {// 每个节点的宽度return 16},getVGap: function getVGap() {// 每个节点的垂直间隙return 30},getHGap: function getHGap() {// 每个节点的水平间隙return 50},},})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)}
}
watch(() => props.treeData,(newValue) => {initTreeData.value = newValue},{ immediate: true, deep: true },
)
onMounted(() => {nextTick(() => {initRender()})
})
</script>
2. 节点组件抽离【StatusNode.vue】
<template><div class="status-node"><div :id="domNodeMsg.id" class="dom-node"><span style="cursor: pointer">{{ domNodeMsg.name }}</span></div></div>
</template><script setup lang="ts">
defineProps(['domNodeMsg'])
</script><style scoped>
.status-node {background-color: #fff;border: 1px solid #ccc;border-radius: 10px;text-align: center;font-size: 12px;padding: 0px 5px;color: #5b8ff9;.dom-node {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
}
</style>
3. 组件引用
 <TopologyBase  domId="featureTreeInfoContainer" :treeData="tableData" />
4.数据格式

注意 id 必须为String格式

export const initData = {id: '376',name: '世界',children: [{id: '377',name: '中国',children: [{id: '380',name: '北方',children: [],}]}]
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/645373.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

正则表达式元字符-详细说明

字符 说明 \ 将下一字符标记为特殊字符、文本、反向引用或八进制转义符。例如&#xff0c;"n"匹配字符"n"。"\n"匹配换行符。序列"\\\\"匹配"\\"&#xff0c;"\\("匹配"("。 ^ 匹配输入字符串…

编写Bash脚本程序从记录文件中提取history命令的优化,再介绍linux bash语法和结构

目 录 一、引言 二、脚本代码实现 三、bash语法和结构 &#xff08;一&#xff09;基本语法 1、脚本开始与结束 2、注释 3、变量 4、数据类型 5、控制结构 6、循环控制 7、函数 8、算术运算 9、算术操作符和逻辑操作符 &#xff08;二&#xff09;命令相关…

c++文件操作 (1) -- 读写文件

目录 为什么使用文件操作 文件输入流和输出流 -- 相对于内存而言 文件操作 1. 文件操作常用类以及头文件 2. 文件输入流(写文件操作) 1. 写文本文件 1&#xff09;文件操作是使用对象来实现的 2&#xff09;文件输出 3&#xff09;打开文件 open函数 &#xff…

UDF学习(一)

1.1什么是UDF&#xff1f; 用户自定义函数&#xff0c;可以动态的连接到fluent求解器上来提高求解器性能。用户自定义函数用C语言编写&#xff0c;使用DEFINE宏来定义。可以使用标准C语言的库函数&#xff0c;也可以使用fluent Inc.提供的预定义宏&#xff0c;通过这些预定义宏…

使用CSS 或 SASS 实现主题背景切换效果

目录 &#x1f389;应用背景 &#x1f389;分析实现思路 &#x1f389;CSS实现主题切换 &#x1f389;SCSS实现主题切换 &#x1f389;结语 &#x1f389;应用背景 现在的主流网站中&#xff0c;无论是一些技术文档获取官网&#xff0c;都存在着使用一个switch按钮实现主题…

Nginx与keepalived实现集群

提醒一下&#xff1a;下面实例讲解是在mac虚拟机里的Ubuntu系统演示的&#xff1b; Nginx与keepalived实现集群实现的效果 两台服务器都安装Nginx与keepalived&#xff1a; mater服务器的ip(192.168.200.2) backup服务器的ip(192.168.200.4) 将 mater服务器Nginx与keepalived都…

【DG 特长生2019】模拟赛赛后总结(2024.1.24)

打了330pt,订正后350pt T1 签到 T2 dfs剪枝&#xff08;虽然我写挂了&#xff09; T3 NOIP原题 T4 floyd 主要是想分享一下T4。 写了一种基于floyd的做法。 感觉好像和大部分人的写法不太一样。 因为看到大小关系&#xff0c;我就想到了传递性。 floyd是可以维护传递…

Unity中URP下获取每一个额外灯数据

文章目录 前言一、我们先来看一下 SimpleLit 中的调用二、获取额外灯索引1、非移动平台2、非GLES平台3、大多数平台 三、获取额外灯数据 前言 在上一篇文章中&#xff0c;我们知道了URP下是怎么获取额外灯数量的。 Unity中URP下获取额外灯数量 在这篇文章中&#xff0c;我们…

Oracle按日周月年自动分区

目录 1、分区键 2、初始分区 3、周月年自动分区 4、按日自动分区表建表语句 与普通建表语句相比&#xff0c;分区表多了一些分区信息&#xff1b; 1、分区键 以下面销售明细表为例&#xff0c;以data_dt为分区键&#xff0c;NUMTODSINTERVAL(1, day) 按日分区 PARTITION …

再学微信小程序

1 微信小程序有几个文件 微信小程序主要包含以下几个文件&#xff1a; .wxml&#xff08;WeiXin Markup Language&#xff09;&#xff1a;用于描述小程序的页面结构&#xff0c;类似于 HTML。在这个文件中&#xff0c;可以使用小程序提供的组件和自定义的组件&#xff0c;以…

虹科分享丨AR与AI融合加速,医疗护理更便捷!

来源&#xff1a;虹科数字化与AR 虹科分享丨AR与AI融合加速&#xff0c;医疗护理更便捷&#xff01; 原文链接&#xff1a;https://mp.weixin.qq.com/s/Fi0wNfk_TDXRo_1-6cSRNQ 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; #AR眼镜 #医疗护理 根据Reports and Da…

Linux ping命令教程:如何检查网络连接状况(附案例详解和注意事项)

Linux ping命令介绍 Ping&#xff08;Packet Internet Groper&#xff09;命令用于检测主机。通过发送Internet控制消息协议(ICMP)Echo数据包到目标主机&#xff0c;检测目标主机是否可达。如果互联网上两个主机之间可以通信&#xff0c;并且没有防火墙阻止这种通信&#xff0…

存储过程为什么使用DELIMITER $$

这是正确的存储过程写法&#xff0c;可以成功执行&#xff0c;相比较上图的报错&#xff0c;增加了DELIMITER&#xff0c;简单解释下这个命令的用途&#xff0c;在MySQL中每行命令都是用“&#xff1b;”结尾&#xff0c;回车后自动执行&#xff0c;在存储过程中“&#xff1b;…

MySQL函数—流程函数

MySQL函数—流程函数&#xff1a;用于实现条件筛选&#xff0c;从而题搞语句的效率。 MySQL函数—流程函数 函数功能IF(value,t,f)如果value为true&#xff0c;则返回t&#xff0c;否则返回fIFNULL(value1,value2)如果value1不为空&#xff0c;返回value1&#xff0c;否则返回v…

Vue+OpenLayers7,快速搭建Vue+OpenLayers7地图脚手架项目。从零开始构建Vue项目并整合OpenLayers7.5.2

返回专栏目录:Vue+OpenLayers7 前言 本章针对Vue初学者,对Vue不熟悉,甚至还不会Vue的入门学生读者。 本章会详细讲解从NodeJS环境到npm环境的各个步骤,再到使用vue-cli脚手架快速生成项目,以及添加OpenLayers7地图库依赖,编写简单的xyz高德地图显示页面的完整教程。 如…

5G安卓手机定制_基于天玑900的安卓主板方案

5G安卓手机方案是一款采用联发科MT6877(天玑900)平台的高性能、可运行安卓操作系统的5G智能模块。该手机采用台积电6纳米低功耗工艺&#xff0c;主频高达2.4GHz&#xff0c;内存支持LPDDR5&#xff0c;并支持5G Sub-6GHz全频段和5G双载波聚合技术等多种制式。同时&#xff0c;该…

docker相关

下载Ubuntu18.04文件64位&#xff08;32位安装不了MySQL&#xff09; https://old-releases.ubuntu.com/releases/18.04.4/?_ga2.44113060.1243545826.1617173008-2055924693.1608557140 Linux ubuntu16.04打开控制台&#xff1a;到桌面&#xff0c;可以按快捷键ctrlaltt 查…

国民技术N32G430C8开发笔记一-新建IAR工程

一、创建IAR工程 1、新建工程&#xff0c;保存到project文件夹。 2、添加SDK到工程。 根据原厂SDK的文件结构在IAR新建相应分组&#xff0c;把各个文件夹的文件加载进去&#xff0c;其中startup文件选择IAR平台的startup_n32g430_EWARM.s。 3、添加头文件路径&#xff0…

2024-01-24(ElasticSearch)

1.mysql和elasticsearch的架构&#xff1a; 2.IK分词器利于分中文词汇。 底层是有一个中文字典&#xff0c;这个字典中的中文词汇也是可以拓展的和禁用某些词。 3.mapping常见属性&#xff1a; type&#xff1a;数据类型 index&#xff1a;是否索引 analyzer&#xff1a;分…

重设红帽Linux root密码:简单实用指南

在使用红帽Linux系统时&#xff0c;我们可能会遇到忘记root密码的情况红帽linux系统root密码&#xff0c;这时候该怎么办呢&#xff1f;本文将详细介绍如何重置红帽Linux系统的root密码。 1.进入单用户模式 首先&#xff0c;我们需要进入单用户模式。开机时红帽linux系统root…