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 元素。
    antv/g6元素之combo_第1张图片
    使用:
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,但它以圆形形状表示组或子图,将相关节点组织在一个圆形区域内,并在图形中以圆形形状显示。如下:
    antv/g6元素之combo_第2张图片
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');

antv/g6元素之combo_第3张图片

你可能感兴趣的:(javascript,开发语言,g6,combo)