antv/g6元素之combo

介绍

在 G6 中，“Combo” 是一种特殊的元素，用于组合和展示多个节点元素的一种方式。它通常用于表示一个组或子图，将多个相关节点组织在一起，并在图形中以单一的形状显示。

属性

  1. type：Combo 的类型，通常是一个字符串，用于标识 Combo 的种类。

  2. id：Combo 的唯一标识符，通常是一个字符串或数值。

  3. parentId：指示 Combo 的父级 Combo 的 ID。这用于创建 Combo 嵌套结构。

  4. style：Combo 的样式属性，包括但不仅与：

    • fill：Combo 的填充颜色。
    • stroke：Combo 的边框颜色。
    • lineWidth：Combo 的边框宽度。
    • opacity：Combo 的不透明度。
    • cursor：鼠标在该 Combo 上时的鼠标样式，

  5. size（可选）：Combo 的最小尺寸（非固定尺寸）。可以是一个数字或数组，用于定义 Combo 的最小宽度和高度。例如，如果是数字 30，则表示宽度和高度都为 30；如果是数组 [30, 20]，则表示宽度为 30，高度为 20。默认情况下，‘circle’ 类型 Combo 的 size 为 20，‘rect’ 类型的为 [20, 5]。

  6. fixSize（可选）：固定该 Combo 的尺寸，不指定时 Combo 大小由内部元素的分布和大小来决定。可以是一个数字或数组，用于定义固定宽度和高度。例如，如果是数字 10，则表示宽度和高度都为 10；如果是数组 [10, 20]，则表示宽度为 10，高度为 20。即使该 Combo 在收起状态下仍然保持 fixSize 指定的尺寸。

  7. fixCollapseSize（可选）：固定该 Combo 收起时的尺寸，不指定时，若未指定 fixSize 则由 size 决定收起时的尺寸，否则统一为 fixSize 尺寸。

  8. padding（可选）：Combo 的内边距。可以是一个数字或数组，用于定义 Combo 内部的上、右、下、左边距。例如，如果是数字 10，则上、右、下、左边距都为 10；如果是数组 [10, 20, 10, 20]，则分别表示上、右、下、左边距为 10、20、10、20。默认情况下，‘circle’ 类型 Combo 的 padding 为 25，‘rect’ 类型的为 [25, 20, 15, 20]。

  9. label（可选）：Combo 的文本标签，用于显示描述 Combo 的文本。

  10. labelCfg（可选）：Combo 的文本标签样式配置项，用于定义文本标签的样式，如字体、颜色等。

  11. collapsed（可选）：指示 Combo 是否处于收起状态。如果设置为 true，则 Combo 会在渲染时默认为收起状态。

  12. collapsedSubstituteIcon（可选，v4.6.8 起支持）：用于指定在 Combo 收起状态下替代的图标样式或配置。

配置

在 AntV G6 中，您可以使用配置对象来创建和自定义 Combo 元素。配置对象是一个包含 Combo 属性的 JavaScript 对象，它用于定义 Combo 元素的类型、样式、行为等属性。以下是如何配置 Combo 元素的方法：

  1. 创建 Combo 类型：
    在创建 Combo 元素之前，您通常需要定义 Combo 的类型，以便将其用于特定场景。您可以使用 comboType 属性来指定 Combo 的类型。
const comboType = 'myComboType'; // 定义 Combo 类型
  1. 定义 Combo 配置对象：
    创建一个包含 Combo 属性的配置对象，包括样式、行为、数据等。以下是一个示例配置对象：
const comboConfig = {
  type: comboType, // 使用定义的 Combo 类型
  id: 'combo1', // Combo 的唯一标识符
  label: 'My Combo', // Combo 的文本标签
  style: {
    fill: '#A0C3FF', // Combo 的填充颜色
    stroke: '#2B5FFB', // Combo 的边框颜色
    lineWidth: 2, // Combo 的边框宽度
    opacity: 0.7, // Combo 的不透明度
    textStyle: {
      fill: '#000', // 文本标签的颜色
      fontSize: 12, // 文本标签的字体大小
    },
  },
  children: ['node1', 'node2'], // Combo 包含的节点 ID
  padding: [10, 20], // Combo 的内边距
  anchorPoints: [
    [0, 0.5], // 连接点 1
    [1, 0.5], // 连接点 2
  ],
};
  1. 将 Combo 添加到图表：
    使用 G6 的 API 将 Combo 对象添加到图表中。
const graph = new G6.Graph({
  container: 'container', // 图表容器的选择器
  width: 800,
  height: 600,
  // 其他配置项
});

graph.addItem('combo', comboConfig); // 将 Combo 添加到图表

通过以上步骤，可以根据需要创建和自定义 Combo 元素。您可以根据实际需求来调整 Combo 的属性，包括样式、文本标签、内边距、连接点等，以使 Combo 元素适应您的图表设计和数据展示。

内置combo
  1. rect Combo 类型：
    “rect” Combo 类型用于创建矩形形状的 Combo 元素。
    在这里插入图片描述
    使用：
const data = {
  combos: [
    {
      label: 'combo_rect',
      type: 'rect',
      label: 'Rect',
    },
  ],
};
const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理
  groupByTypes: false,
  defaultCombo: {
    // type: 'rect',  // 在数据中已经指定 type，这里无需再次指定
    style: {
      fill: '#bae637',
      stroke: '#eaff8f',
      lineWidth: 5,
    },
  },
});
graph.data(data);
graph.render();
  1. circle Combo 类型：
    “circle” Combo 类型用于创建圆形形状的 Combo 元素。它类似于 “rect” Combo，但它以圆形形状表示组或子图，将相关节点组织在一个圆形区域内，并在图形中以圆形形状显示。如下：
    在这里插入图片描述
const data = {
  combos: [
    {
      label: 'combo_circle',
      type: 'circle',
      label: 'Circle',
    },
  ],
};
const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理
  groupByTypes: false,
  defaultCombo: {
    // type: 'circle',  // 在数据中已经指定 type，这里无需再次指定
    style: {
      fill: '#bae637',
      stroke: '#eaff8f',
      lineWidth: 5,
    },
  },
});
graph.data(data);
graph.render();
交互

和其他元素一样，也可以Combo 元素添加各种交互效果，以增强用户体验和可视化效果。以下是一些常见的 Combo 交互效果：

  1. 单击事件：
    可以为 Combo 元素添加单击事件，以便在用户单击 Combo 时触发特定操作，如展开或折叠 Combo。
graph.on('combo:click', (e) => {
  const combo = e.item; // 获取被单击的 Combo 元素
  // 执行单击事件的操作，例如展开或折叠 Combo
});
  1. 拖动事件：
    Combo 元素可以支持拖动，您可以为 Combo 元素添加拖动事件，以实现拖动 Combo 的功能。
graph.on('combo:dragstart', (e) => {
  // 拖动开始时的操作
});

graph.on('combo:drag', (e) => {
  // 拖动过程中的操作
});

graph.on('combo:dragend', (e) => {
  // 拖动结束时的操作
});
  1. 鼠标悬停事件：
    当用户将鼠标悬停在 Combo 元素上时，可以触发相应的事件。
graph.on('combo:mouseenter', (e) => {
  // 鼠标进入 Combo 时的操作
});

graph.on('combo:mouseleave', (e) => {
  // 鼠标离开 Combo 时的操作
});
  1. 缩放和平移：
    用户可以缩放和平移整个图表，您可以设置 Combo 元素的属性，使其跟随缩放和平移。
comboConfig = {
  // 其他属性
  // ...
  allowZoom: true, // 允许 Combo 跟随缩放
  allowDrag: true, // 允许 Combo 跟随平移
};
  1. 其他交互效果：
    也可以根据需要自定义其他交互效果，如双击事件、右键单击事件等，以实现特定的功能和用户体验。

自定义combo

之前也介绍过自定义节点、自定义边。当然也可以使用G6.registerCombo () 进行自定义扩展内置的 Combo。不过官方介绍最好使用内置rect、circle进行拓展，不建议复写 update 和 draw 方法。

官方给出的注册combo的接口如下：

G6.registerCombo(
  'comboName',
  {
    /**
     * 绘制 Combo 中的图形。不需要为默认的 label 增加图形，父类方法会自动增加 label
     * @param  {Object} cfg Combo 的配置项
     * @param  {G.Group} group 图形分组，Combo 中的图形对象的容器
     * @return {G.Shape} 返回一个绘制的图形作为 keyShape，通过 combo.get('keyShape') 可以获取。
     * 关于 keyShape 可参考文档 核心概念-节点/边/Combo-图形 Shape 与 keyShape
     */
    drawShape(cfg, group) {},
    /**
     * 绘制后的附加操作，默认没有任何操作
     * @param  {Object} cfg Combo 的配置项
     * @param  {G.Group} group 图形分组，Combo 中的图形对象的容器
     */
    afterDraw(cfg, group) {},
    /**
     * 更新节点后的操作，新增的图形需要在这里控制其更新逻辑
     * @override
     * @param  {Object} cfg 节点的配置项
     * @param  {Combo} combo 节点
     */
    afterUpdate(cfg, combo) {},
    /**
     * 响应 Combo 的状态变化。
     * 在需要使用动画来响应状态变化时需要被复写，其他样式的响应参见下文提及的 [配置状态样式] 文档
     * @param  {String} name 状态名称
     * @param  {Object} value 状态值
     * @param  {Combo} combo 节点
     */
    setState(name, value, combo) {},
  },
  // 被继承的 Combo 类型名，可选：'circle' 或 'rect'
  extendedComboName,
);

通过上面的方法，我们就可以实现自定义的combo，这里简单实现一下：

import G6 from "@antv/g6";
export const RegisterCombo = (name: string) => {
  G6.registerCombo(
    name,
    {
      drawShape(cfg: any, group: any) {
        // 在此处定义 Combo 元素的绘制方式
        // 使用 group 参数绘制 Combo 的形状和样式
        const rect = group.addShape("rect", {
          attrs: {
            x: 0,
            y: 0,
            width: 100,
            height: 50,
            fill: "#7FB7FF",
            stroke: "#2B5FFB",
            lineWidth: 2,
          },
          name: "my-combo-tect",
        });
        // 添加文本标签
        group.addShape("text", {
          attrs: {
            x: 50,
            y: 25,
            text: cfg.label,
            fill: "green",
            fontSize: 12,
            textAlign: "center",
            textBaseline: "middle",
          },
          name: "my-combo-text",
        });

        group.addShape("circle", {
          attrs: {
            fill: "#fff",
            stroke: "#999",
            opacity: 1,
            x: 50,
            y: 50,
            r: 5,
          },
          name: "my-combo-circcle",
        });

        return rect;
      }
    },
    "rect"
  );
};

使用还是先注册自定义combo，需要使用自定义combo将type属性设置为自定义name。

const data = {
    combos: [
      {
        id: "c",
        label: "Combo C",
        type: 'my-combo'
      },
    ]
  }
  RegisterCombo('my-combo');

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【Redis】Redis常用命令-getsetkeysexistsexpirettltype

【Redis】Redis常用命令-getsetkeysexistsexpirettltype

文章目录 读取文档注意事项set命令get命令全局/通用命令KEYSEXISTSDELEXPIRETTLTYPE 读取文档注意事项 官方文档链接：https://redis.io/ 注意：redis的命令不区分大小写 在redis文档给出的语法格式说明： []：相当于一个独立的单元&a…
阅读更多...
面试—如何介绍项目中的多级缓存？

面试—如何介绍项目中的多级缓存？

项目中使用的多级缓存也就是 分布式缓存 Redis 本地缓存 Caffeine，那么令 Caffeine 作为一级缓存，Redis 作为二级缓存，在项目中通过记录数据的访问次数，将热点数据放在 本地缓存，将非热点数据放在 Redis缓存 中&#…
阅读更多...
详解RSA加密算法 | Java模拟实现RSA算法

详解RSA加密算法 | Java模拟实现RSA算法

目录 一.什么是RSA算法 二.RSA算法的算法原理 算法描述 三.RSA算法安全性 四.RSA算法的速度 五.用java实现RSA算法 一.什么是RSA算法 1976年，Diffie和Hellman在文章“密码学新方向（New Direction in Cryptography）”中首次提出了公开…
阅读更多...
FSB逮捕为乌克兰网络部队工作的俄罗斯黑客

FSB逮捕为乌克兰网络部队工作的俄罗斯黑客

导语 近日，俄罗斯联邦安全局（FSB）逮捕了两名涉嫌协助乌克兰网络部队对俄罗斯重要基础设施目标进行网络攻击的个人。这起事件引起了广泛关注，涉及到了网络安全和国际关系等多个领域。本文将为您详细介绍这一事件的背景和最新进展。…
阅读更多...
强大的pdf编辑软件：Acrobat Pro DC 2023中文

强大的pdf编辑软件：Acrobat Pro DC 2023中文

Acrobat Pro DC 2023是一款强大的PDF编辑和管理软件，它提供了广泛的功能，使用户能够轻松创建、编辑、转换和共享PDF文档。通过直观的界面和先进的工具，用户可以快速进行文本编辑、图像调整、页面管理等操作，同时支持OCR技术&#…
阅读更多...
IOS渲染流程之提交图层数据至RenderThread进程

IOS渲染流程之提交图层数据至RenderThread进程

大致链路 UIView/CALayer---->CoreAnimation./Core Graphics/Core Image---->GPU Drive-->GPU 图层树/视图树 一个UIView（视图）对应一个CALayer（图层），CALayer对应显示的数据其有个content代表Bitamp&#…
阅读更多...
firefox浏览器添加自定义搜索引擎方法

firefox浏览器添加自定义搜索引擎方法

firefox浏览器添加自定义搜索引擎方法 1.在地址栏添加搜索引擎2.Mycroft Project 搜索引擎附加组件3.通过扩展插件添加自定义搜索引擎 Firefox这货居然不支持直接网址%s的搜索引擎定义方式，以下是添加方法。 firefox国际版119.0 1.在地址栏添加搜索引擎 &#xff…
阅读更多...
使用vscode实现远程开发，并通过内网穿透在公网环境下远程连接

使用vscode实现远程开发，并通过内网穿透在公网环境下远程连接

文章目录 前言1、安装OpenSSH2、vscode配置ssh3. 局域网测试连接远程服务器4. 公网远程连接4.1 ubuntu安装cpolar内网穿透4.2 创建隧道映射4.3 测试公网远程连接 5. 配置固定TCP端口地址5.1 保留一个固定TCP端口地址5.2 配置固定TCP端口地址5.3 测试固定公网地址远程 前言 远程…
阅读更多...
什么是Webpack的loader和plugin？它们的作用是什么？

什么是Webpack的loader和plugin？它们的作用是什么？

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅：探索Web开发的奇妙世界 欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…
阅读更多...
vue2和vue3区别

vue2和vue3区别

Vue2 和 Vue3 双向绑定方法不同 总结 vue3中没有$set Vue2 和 Vue3 双向绑定方法不同 Vue2 : Object.defineProperty() Vue3 : new Proxy()vue3 实例 数据会更新 const addBtn () >{obj.c 3; } vue2实例 问题：数据更新了视图没更新 Object.defineProperty…
阅读更多...
VR全景在医院的应用：缓和医患矛盾、提升医院形象

VR全景在医院的应用：缓和医患矛盾、提升医院形象

医患关系一直以来都是较为激烈的，包括制度的不完善、医疗资源紧张等问题也时有存在，为了缓解医患矛盾，不仅要提升患者以及家属对于医院的认知，还需要完善医疗制度，提高医疗资源的配置效率，提高服务质量。 因…
阅读更多...
turn.js 模版简单使用

turn.js 模版简单使用

turn.js 不修改添加原功能仅 替换、修改图片格式使用模版 HTML文件 turn.js官网：http://www.turnjs.com/# 第一步 1.点击链接去到官网 2.点击下载按钮 下载左侧示例压缩包 3.解压完成拿到示例文件 turnjs4 4.在samples目录下案例中查看意向使用的模版样式 …
阅读更多...
视频会议系统方案报价

视频会议系统方案报价

视频会议系统 报价方案是咨询视频会议系统价格用户所关注的，但是报价是一个比较细致的工作，需要从多维度进行对比。 1. 视频会议终端设备费用：根据所需设备的数量和所选设备价格确定。视频会议终端类型各异，摄像头、麦克风、显示设…
阅读更多...
UWB 技术在机器人和移动领域的应用题】

UWB 技术在机器人和移动领域的应用题】

多年来，机器人生态系统不断增长，不同的应用程序也在不断增长。如今，机器人出现在许多不同的领域，例如私人家庭、商业场所、仓库和医疗场所。他们要么自主工作，要么与我们并肩工作，帮助我们完成任务。 根据…
阅读更多...
S5PV210(十):LCD

S5PV210(十):LCD

本文主要探讨210的LCD相关知识。 LCD LCD称液晶(透光背光呈色),可在电信号驱动下使液晶分子旋转,呈现不同的颜色(被动发光) lcd接口为TTL接口(5V为1，0V为0),不能传输太远,远距离传输方式:SoC(TTL) ->VGA-> LCD(TTL) 其他显设备:CRT(…
阅读更多...
【错误解决方案】TypeError: gca() got an unexpected keyword argument ‘projection‘

【错误解决方案】TypeError: gca() got an unexpected keyword argument ‘projection‘

1. 错误提示 在 python程序中，使用Matplotlib库中的 gca() 函数出现错误，提示“TypeError: gca() got an unexpected keyword argument projection”。 2. 解决方案 这个错误的原因是 gca() 函数并不接受 projection 这个关键字参数。 gca() 函数是用来…
阅读更多...
js调整table表格上下相邻元素顺序

js调整table表格上下相邻元素顺序

有时候我们会遇到要通过箭头控制table表格上下顺序的需求，如下： 点击向下就将该元素下移一位，下面的一位元素就移上来，点击向上就将该元素上移一位，上面的一位元素就移下来，也就是相邻元素互换位置顺序： <el-table :data="targetTable" border style=&quo…
阅读更多...
【深度学习 AIGC】stable diffusion webUI 使用过程，参数设置，教程，使用方法

【深度学习 AIGC】stable diffusion webUI 使用过程，参数设置，教程，使用方法

文章目录 docker快速启动vae.ckpt或者.safetensorsCFG指数/CFG Scale面部修复/Restore facesRefinerTiled VAEClip Skipprompt提示词怎么写 docker快速启动 如果你想使用docker快速启动这个项目&#xff0c;你可以按下面这么操作&#xff08;显卡支持CUDA11.8&#xff09;。如…
阅读更多...
windows和docker环境下springboot整合gdal3.x

windows和docker环境下springboot整合gdal3.x

链接: gdal官网地址 gdal gdal的一个用c语言编写的库&#xff0c;用于处理地理信息相关的数据包括转换&#xff0c;识别数据&#xff0c;格式化数据以及解析 同时提供第三方语言的SDK包括python&#xff0c;java上述需要编译后使用 java是需要使用jni接口调用实现方法在wind…
阅读更多...
数码3C零售门店运营，智慧显示有何优势？以清远电信为例。

数码3C零售门店运营，智慧显示有何优势？以清远电信为例。

随着时代和科技的发展&#xff0c;线下实体零售门店运营方式也逐步进化&#xff0c;面对有大体量线门店&#xff0c;需要花费更多心思和资源管理的品牌&#xff0c;在全球经济缓慢增长的当下&#xff0c;开始走向去冗余、提效率的阶段&#xff0c;俗称降本增效。 在此阶段&…
阅读更多...
最新文章

Copyright @ 2022~2023