antv/g6 交互与事件及自定义Behavior

监听和绑定事件

在 G6 中,提供了直接的单机事件、还有监听时机的方法。可以监听画布、节点、边、以及各函数被调用的时机等:

1. 绑定事件

要绑定事件,首先需要获得图表实例(Graph 实例),然后使用 on 方法来绑定事件。
分为三类:全局事件、canvas事件、节点/边/combo事件;

graph.on(eventName, handler);
// 以点击事件为例
// 全局
graph.on('click', ev=>{});
// canvas事件
graph.on('canvas:click', ev=>{});
// 点边及combo事件
graph.on('node/edge/combo:click',ev=>{});
  • eventName 是事件名称,可以是 G6 内置事件,也可以是自定义事件。
  • handler 是事件处理程序,是一个函数,用于处理事件发生时的逻辑。

2. 内置事件

G6 提供了一些内置事件,用于处理图表的各种交互。例如一些常见的内置事件:

  • 'node:click': 节点被点击时触发。
  • 'node:mouseenter': 鼠标进入节点时触发。
  • 'node:mouseleave': 鼠标离开节点时触发。
  • 'edge:click': 边被点击时触发。
  • 'edge:mouseenter': 鼠标进入边时触发。
  • 'edge:mouseleave': 鼠标离开边时触发。
  • 'canvas:click': 画布被点击时触发。
  • 'canvas:mouseenter': 鼠标进入画布时触发。
  • 'canvas:mouseleave': 鼠标离开画布时触发。
    这里只是列举其中几个

3. 事件处理程序

事件处理程序是一个函数,用于定义事件触发时的逻辑。它通常有两个参数:

  • e: 事件对象,包含事件的详细信息。
  • item: 与事件相关联的图元素,如节点或边。

下面是一个示例,演示如何绑定 'node:click' 事件和相应的处理程序:

graph.on('node:click', (e, item) => {// 在控制台中打印节点的 IDconsole.log('Node Clicked:', item.getModel().id);
});

4. 解绑事件

要解绑事件,你可以使用 off 方法。解绑事件的一般语法如下:

graph.off(eventName, handler);
  • eventName 是要解绑的事件名称。
  • handler 是要解绑的事件处理程序。

5. 时机监听

时机事件指渲染、视口变换、元素增删改、数据变换等时机。
比如下面例子绑定了渲染完成时机的监听,afterrender、afterlayout 一类事件必须在 graph.render() 或 graph.read() 之前绑定,方可监听到首次渲染、布局完成后的相关事件。

graph.on('afterrender', (ev) => {// ... do sth
});

内置行为Behavior

在 AntV G6 中,Behavior 是一种行为,它用于定义图表上的互动和交互行为。Behavior 允许你自定义鼠标交互、拖拽、缩放、选择等操作,以改变图表的状态和展示。G6目前提供了14个内置的Behavior。

G6 提供了一些内置的 Behavior,可以在创建图表实例时配置,例如:
AntV G6 提供了一些内置的行为(Behaviors),用于在图表中处理用户交互和操作。以下是 G6 内置的一些常见行为以及它们的作用:

  1. drag-canvas: 允许用户拖拽整个画布。
  2. zoom-canvas: 允许用户缩放画布。
  3. drag-node: 允许用户拖拽节点。
  4. drag-combo: 允许用户拖拽群组(Combo)。
  5. collapse-expand-combo: 允许用户折叠/展开群组。
  6. scroll-canvas: 滚轮滚动画布,v4.2.6 起支持。
  7. click-select: 单击选中节点或边。
  8. lasso-select: 使用 Lasso 工具框选节点或边。
  9. brush-select: 使用 Brush 工具框选节点或边。
  10. tooltip-edge: 使用方式基本与 tooltip 相同,但是移到边时触发。
  11. tooltip: 节点文本提示。
  12. activate-relations: 选中节点时,高亮相关的边。
  13. shortcuts-call: 允许终端用户使用键盘组合键调用 Graph 的函数,例如按下键盘上的 control 与 1,对图进行适应画布。
  14. collapse-expand: 只适用于树图,展开或收起子树。

使用:

const graph = new G6.Graph({container: 'container',width: 800,height: 600,modes: {default: [{type:'drag-canvas',direction: 'both' //允许拖拽方向,支持'x','y','both',默认方向为 'both';enableOptimize: true // 是否开启优化,开启后拖动画布过程中隐藏所有的边及节点上非 keyShape 部分,默认关闭},{type:'tooltip',offset: 10,formatText: model=>{// 格式化函数,可以返回文本或者 HTML, 这里返回label字段return model.label;}},{type:'brush-select', // 框选brushStyle:{ // 设置框选样式,填充色,填充色透明度,边框色,边框宽度fill:'', fillOpacity:'',stroke:'',lineWidth:1},selectedState: '', // 选中的状态,默认是selected, 可以根据自己的需求设置样式trigger:'' // 触发框选的动作},'scroll-canvas', 'zoom-canvas', 'drag-node','click-select','tooltip','create-edge','edge-tooltip'],},// ...其他配置...
});//当节点开始被拖拽的时候触发的事件graph.on('node:dragstart', ev=>{});// 节点再拖拽过程中触发graph.on('node:drag', ev=>{});// 节点再拖拽完成时触发graph.on('node:dragend', ev=>{});// 使用了 'brush-select' , 'click-select' 或 'lasso-select' Behavior 且选中元素发生变化时,该事件被触发graph.on('nodeselectchange', ev=>{const { nodes, edges } = ev.selectedItems; //获取框选的数据});// 创建边之后触发graph.on('aftercreateedge', ev=>{const edge = ev.edge.getModel(); // 创建的边// 获取边的起点和终点, 进行其他操作const source = edge.source;const target = edge.target;});

上述代码中,modes 属性定义了内置行为。并且监听了一些行为的事件,用法就是这样用的。

自定义交互(Behavior)

除了内置行为,你还可以创建自定义的 Behavior 来实现特定的交互需求。通过 G6.registerBehavior(name, config)。创建,name为行为名字,创建自定义行为后需要引用到图例中,然后在modes里面使用该交互行为。
自定义 Behavior 可以包括以下几个主要部分:

getDefaultCfg(): 返回默认的配置选项。
getEvents(): 返回事件监听配置,指定哪些事件会触发该 Behavior。
shouldBegin(e): 定义 Behavior 开始的条件。
shouldUpdate(e): 定义 Behavior 更新的条件。
shouldEnd(e): 定义 Behavior 结束的条件。
bind(graph): 绑定到图表实例,使 Behavior 生效。
unbind(): 解绑 Behavior。

下面简单实现一个双击画布创建点的自定义交互:

import G6 from "@antv/g6";
import _ from "lodash";
export const RegisterAddNode = () => {G6.registerBehavior("create-node", {getEvents() {return {// 监听 createOn 事件,触发 createNode 方法"canvas:dblclick": "createNode",};},createNode(e: any) {const graph: any = this.graph;// 获取鼠标位置const point = graph.getPointByClient(e.clientX, e.clientY);// 创建新节点graph.addItem("node", {x: point.x,y: point.y,size: 32,id: _.uniqueId("_node"),label: "New node",// group: true,});},});
};

使用:

import React, { useEffect, useRef } from "react";
import G6 from "@antv/g6";
import _ from "lodash";
import { RegisterAddNode } from "./registerAddNode";const Beheaviors: React.FC<any> = (props: any) => {const containerRef = useRef<HTMLDivElement>(null);const graphRef = useRef<any>();useEffect(() => {initDraw();}, []);const initDraw = () => {RegisterAddNode(); // 初始化画布引用自定义交互graphRef.current = new G6.Graph({linkCenter: true,container: containerRef.current || "",height: 800,width: 800,modes: { default: ["create-node", "drag-canvas", "drag-node", "custom-tooltip"] },defaultNode: {size: 20,style: {fill: "#C6E5FF",stroke: "#5B8FF9",lineWidth: 0.3,},labelCfg: {style: {fontSize: 12,},position: "bottom",offset: 1,},},defaultEdge: {style: {lineWidth: 2,color: "#000",labelCfg: {autoRotate: true,refY: 5,style: {fill: "#000",},},endArrow: {fill: "#000",path: G6.Arrow.triangle(10, 12, 25),d: 25,},},},});const data = {nodes: [{ id: "node1", x: 100, y: 100, label: "Node 1" },{ id: "node2", x: 300, y: 100, label: "Node 2" },],edges: [{ source: "node1", target: "node2", label: "Edge 1" }],};// 渲染图表graphRef.current.data(data);graphRef.current.render();};return (<><divclassName="ModalgraphContainer"ref={containerRef}id="graphContainer"></div></>);
};
export default Beheaviors;

上面的代码里创建了一个名为 create-node 的自定义 Behavior,它监听鼠标的 canvas:dblclick 事件,并在触发时创建新节点。然后在初始化图例时引用。在modes里面加上交互名字’create-node’。这样在双击画布时就会默认添加一个点。

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

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

相关文章

iOS开发 Command PhaseScriptExecution failed with a nonzero exit code

解决步骤&#xff1a; 1.重启电脑 2.把xcode项目Build Setting中的Sandboxing置为No 3.重跑项目

大数据毕业设计选题推荐-收视点播数据分析-Hadoop-Spark-Hive

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

Java web(六):FilterListenerAJAX

文章目录 一、Filter1.1 基本介绍1.2 过滤器的执行流程1.3 拦截路径配置1.4 过滤器链1.5 案例 二、Listener三、AJAX3.1 快速入门3.2 Axios异步框架 四、 JSON4.1 JSON基础语法4.2 Fastjson 五、 案例JSONAxiosServlet Java web的三大组件&#xff1a;Servlet、Filter、Listene…

[SSD综述 1.5] SSD 主控和固件核心功能详解(万字)

依公知及经验整理,原创保护,禁止转载。 专栏 《SSD入门到精通系列》 <<<< 返回总目录 <<<< 1. 主控概述1.1 主控作用2. 主控的硬件功能和实现2.1 主控处理器2.2 闪存、主机接口2.3 主控纠错2.4 断电保护3 固件功能3.1 FTL3.2 预留空间(Over-provisi…

Linux Crontab 定时任务

crond 服务 Linux 通过 crond 服务来支持 crontab。 查看 crond 服务是否已经安装 输入下面命令确认 crond 服务是否已安装。 systemctl list-unit-files | grep crond 如果为 enabled&#xff0c;表示服务正运行。 crontab 文件 crontab 要执行的定时任务都被保存在 /etc…

基于单片机的衣物消毒清洗机系统设计

收藏和点赞&#xff0c;您的关注是我创作的动力 文章目录 概要 一、系统总体设计2.2 功能分析2.3 系统框架设计 二、硬件电路设计3.1 电源模块的设计 三、 软件设计4.1 系统整体流程4.4 软件整体流程实物图 四、 结论五、 文章目录 概要 基于单片机的衣物消毒清洗机可以应用在…

一篇文章带你学会MybatisPlus~

实现MybatisPlus的简单使用&#xff1a; 数据库准备部分&#xff1a; //创建名为mybatisPlus的数据库 create database mybatisPlus;//使用该数据库 use mybatisPlus;//创建user表 CREATE TABLE user( id bigint(20) NOT NULL COMMENT 主键ID , name varchar(30) DEFAULT NUL…

Sqoop的安装和使用

目录 一.安装 二.导入 1.全量导入 一.MySQL导入HDFS 二.MySQL导入Hive 2.增量导入 一.过滤导入hdfs/hive 二.导出 一.安装 1.下载地址&#xff1a;sqoop下载地址 2.解压 tar -zxvf ./sqoop-1.4.7.bin__hadoop-2.6.0.tar.gz -C ../module/ 3.改名和配置归属权限 #改名…

ubuntu 20.04 + Anaconda + cuda-11.8 + opencv-4.8.0(cuda)

环境&#xff1a;一键编译opencv-4.8.0(cuda)&#xff0c;前提是已经安装好了cuda和cudnn Anaconda安装 参考: https://blog.csdn.net/weixin_46947765/article/details/130980957 opencv4.8.0编译安装 一键编译shell脚本 VERSION4.8.0test -e ${VERSION}.zip || wget http…

oracle sqlplus的使用 ,查询oracle实例名和服务名,查询oracle容器,切换oracle容器

Oracle的sqlplus是与oracle数据库进行交互的客户端工具&#xff08;oracle数据库自带的客户端工具&#xff09;&#xff0c;借助sqlplus可以查看、修改数据库记录。在sqlplus中&#xff0c;可以运行sql*plus命令与sql语句。 1。先使用root账户登陆系统后&#xff0c;使用su - o…

首发scitb包,一个为制作统计表格而生的R包

目前&#xff0c;本人写的第3个R包scitb包已经正式在R语言官方CRAN上线&#xff0c;scitb包是一个为生成专业化统计表格而生的R包。 可以使用以下代码安装 install.packages("scitb")scitb包对我而言是个很重要的R包&#xff0c;我的很多想法需要靠它做平台来实现&a…

【chatgpt】让gpt带你掌握设计模式

让gpt带你掌握设计模式 准备设计模式面试的目录&#xff1a; 概述 什么是设计模式&#xff1f;为什么设计模式重要&#xff1f;设计模式的分类 创建型模式 (Creational Patterns) 单例模式 (Singleton Pattern)工厂模式 (Factory Pattern)抽象工厂模式 (Abstract Factory Patt…

软件测试/测试开发丨利用ChatGPT 生成自动化测试脚本

点此获取更多相关资料 简介 自动化测试脚本可以模拟用户与应用程序的交互&#xff0c;例如点击按钮、输入数据、导航到不同的页面等等&#xff0c;以验证应用程序的正确性、性能和稳定性。 自动化测试在回归测试、冒烟测试等测试流程中都可以极大地起到节省时间、节省人力的作…

【主题教育】民革达州市委会开展“践诺我与民革共成长“讲述活动

【主题教育】民革达州市委会开展“践诺,我与民革共成长“讲述活动 10月28日,民革达州市委会开展“践诺,我与民革共成长——我是民革‘螺丝钉’讲述活动”,有序推进民革四川省委会“重温加入民革承诺、守护民革精神家园”专项活动往心里走、往深里走、往实里走。达州市人大常委会…

计算机组成与结构-安全性和可靠性

系统可靠性分析 概念 平均无故障时间 MTTF 1/失效率 平均故障修复时间 MTTR1/修复率 平均故障间隔时间 MTBFMTTFMTTR 系统可用性 MTTF/(MTTFMTTR)*100% 计算 串联系统 一个设备不可靠&#xff0c;整个系统崩溃RR1R2Rn 并联系统 所有设备不可靠&#xff0c;整个系统崩溃R1-(1…

Vue 官网使用与环境搭建

vue官网网址&#xff1a;https://cn.vuejs.org/vue脚手架文档网址&#xff1a;https://cli.vuejs.org/zh/ vue团队为了使得vue更加好的使用&#xff0c;维护了一些文档。 API是vue的字典&#xff0c;在编写vue的时候&#xff0c;遇到了一些不会的方法那么就去找API&#xff0c…

Visual Studio 2010 软件安装教程(附下载链接)——计算机二级专用编程软件

下载链接&#xff1a; 提取码:2wAKhttps://www.123pan.com/s/JRpSVv-9injv.html 安装步骤如下&#xff1a; 1.如图所示&#xff0c;双击打开【Visual Studio 2010简体中文旗舰版】文件夹 2.如图所示&#xff0c;找到“Setup”文件夹打开&#xff0c;双击运行“setup” 3.如图…

Datawhale-AIGC实践

Datawhale-AIGC实践 部署ChatGLM3-6B平台 clone 项目&#xff0c;配置环境 git clone https://github.com/THUDM/ChatGLM3.git cd ChatGLM3 pip install -r requirement.txt修改web_demo.py, web_demo2.py 设置加载模型的路径修改启动代码: demo.queue().launch(shareFalse…

SpringMVC简单介绍与使用

目录 一、SpringMVC介绍 二、SpringMVC作用 三、SpringMVC核心组件 四、SpringMVC快速体验 一、SpringMVC介绍 Spring Web MVC是基于Servlet API构建的原始Web框架&#xff0c;从一开始就包含在Spring Framework中。正式名称“Spring Web MVC”来自其源模块的名称&#xff…

uniapp中地图定位功能实现的几种方案

1.uniapp自带uni.getLocation uni.getLocation(options) getlocation | uni-app官网 实现思路&#xff1a;uni.getLocation获取经纬度后调用接口获取城市名 优点&#xff1a;方便快捷&#xff0c;直接调用 缺点&#xff1a;关闭定位后延时很久&#xff0c;无法控制定位延迟…