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

这篇具有很好参考价值的文章主要介绍了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) => {
  // 在控制台中打印节点的 ID
  console.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 (
    <>
      <div
        className="ModalgraphContainer"
        ref={containerRef}
        id="graphContainer"
      ></div>
    </>
  );
};
export default Beheaviors;

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

到了这里,关于antv/g6 交互与事件及自定义Behavior的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue 复杂的流程图实现--antv/g6

    可以先看下对应的文档:G6 Demos - AntV  npm install --save @antv/g6 实现如图:  

    2024年02月08日
    浏览(48)
  • 可视化—AntV G6实现节点连线及展开收缩分组

    AntV 是蚂蚁金服全新一代数据可视化解决方案,主要包含数据驱动的高交互可视化图形语法G2,专注解决流程与关系分析的图表库 G6、适于对性能、体积、扩展性要求严苛的场景。 demo使用 数字 模拟真实的节点及分组数据。 combo 内的 nodes 亦是使用 随机数 生成,节点之前的

    2024年02月16日
    浏览(62)
  • AntV G6 的坑之——从卡掉渣到满帧需要几步

    AntV G6 是一款图可视化与分析开源引擎。《AntV G6 的坑之——XXX》系列文章持续更新中,总结常见问题及神坑解决方案。任何问题可在 GitHub Issue 中提问,求 GitHub Star ⭐️https://github.com/antvis/g6 原文链接:https://g6.antv.antgroup.com/manual/faq/performance-opt 在面对复杂数据的图可视分析

    2024年02月16日
    浏览(65)
  • 使用antv/G6在vue项目中开发较复杂样式流程图

    设计师提供了一版样式较复杂的流程图,我搜了一些常用的vue-super-flow和vue-x6-flow等都只支持简单的样式。之前自己写过纯展示流程图不涉及太多交互,感觉还是找一个成熟的插件开发更适合,也方便其他同事参考,所以最后选择了用antv/G6自己个性化开发,总结了使用antv/G6在

    2023年04月09日
    浏览(108)
  • VTK & QT QVTKWidget自定义鼠标和键盘交互事件

    目录 一、问题描述 二、代码实现 1. 自定义鼠标交互事件 2. 移除默认鼠标交互监听事件,塞入自定义监听事件 在使用VTK显示的过程中,通常会使用QT来进行界面设计。这里通常使用QVTKWidget将VTK的渲染窗口显示到QT的组件中。 QVTKWidget组件自带交互器vtkRenderWindowInteractor和Rende

    2024年02月14日
    浏览(54)
  • Unity Meta Quest 一体机开发(十三):【手势追踪】自定义交互事件 EventWrapper

    此教程相关的详细教案,文档,思维导图和工程文件会放入 Spatial XR 社区 。这是一个高质量 XR 社区,博主目前在内担任 XR 开发的讲师。此外,该社区提供教程答疑、及时交流、进阶教程、外包、行业动态等服务。 社区链接: Spatial XR 高级社区(知识星球) Spatial XR 高级社区

    2024年01月19日
    浏览(50)
  • G6绘制树形图(自定义节点、自定义边、自定义布局)

    在 registerNode 中定义所有的节点 为了使用内置的布局方式,选择参数为 ‘tree-node’ 树节点类型,数据格式可以存在children子节点,效果自动生成子树 cfg 可以拿到数据,如cfg.id、cfg.name 使用 group.addShape(‘rect’, {}) 定义节点 rect 配置参数:https://antv-g6.gitee.io/zh/docs/api/shapeProp

    2024年02月05日
    浏览(34)
  • Antd G6实现自定义工具栏

           在使用g6实现知识图谱可视化中,产品经理提出了有关图谱操作的不少功能,需要放置在工具栏中,其中有些功能不在g6自带的功能里,且工具栏样式、交互效果也和官方自定义工具栏不同。那我们怎么去实现呢?         g6官方的工具栏案例是这样:G6,提供了“重

    2024年01月25日
    浏览(54)
  • 在vue中Antv G2 折线图如何添加点击事件获取折线上点的值

      在项目中有个需求是点击折线图的点,获取当前点的信息,其它图形都可以参考相关的API获取到,但area做的折线图怎么都获取不到点击的信息,只能获取全部的信息,最终解决如下: 用户的鼠标在折线图上移动时,监听tooltip的变化,通过一个变量记录tooltip的当前值。 对

    2024年02月13日
    浏览(38)
  • 创建可交互的图表:AntV X6实现预留空白位置、拖拽吸附与信息修改弹框

    首先用AntV X6官网的一句简介了解一下什么是X6 X6 是基于 HTML 和 SVG 的图编辑引擎,提供低成本的定制能力和开箱即用的内置扩展,方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。 知道了X6是什么,那么我们就要开始使用了 首先得确定框架,其次就要安装X6 由于项目

    2024年02月16日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包