g6/ComboDisplayModel.zh.md at fe7dcbb528d4fc42bb3933875fdcab39576653ef

test/g6

mirror of https://gitee.com/antv/g6.git synced 2024-12-15 18:11:08 +08:00

Yanyan-Wang fe7dcbb528 docs: add data docs

2023-11-10 18:43:02 +08:00

12 KiB

Raw Blame History

title	order
ComboDisplayModel 渲染数据	12

ComboDisplayModel（Combo 的渲染/展示数据）由 ComboModel（内部流转数据）通过您配置在图实例上 mapper（specification.combo）映射后的结果，仅用于内部渲染时消费，您在其他任何地方不会消费它。数据类型继承自内部流转的 Combo 数据类型 ComboModel，扩展后定义如下：

interface ComboDisplayModel {
  id: string | number;
  data: ComboDisplayModelData; // 扩展了 ComboModelData
}

id

Combo 的唯一 ID，Combo 创建后，ID 不可被修改。

是否必须: 是；
类型: string|number

data

ComboDisplayModelData 中的数据已经是 ComboModel 通过 Graph 实例上配置的对应 mapper（specification.combo）映射后的结果，这里面应当存储所有 ComboModel 的内容，再额外加上许多的图形样式配置。

是否必须: 是；
类型: ComboDisplayModelData，基于 ComboModel 额外扩展内容如下文：

ComboDisplayModelData.lodLevels

对于该 Combo 而言，设定图缩放等级的划分方式。是一个缩放系数范围的数组，表示缩放等级的划分。其中有一项的 primary 应当为 true，代表该层级的序号为 0，zoomRange 小于当前层级的，序号递减；大于当前层级的，序号递增。序号为在下面的图形配置中 lod 所对应的值。

是否必须: 否；
类型: LodLevel[]，其中 LodLevel 如下表：

Name	Type	Description
`zoomRange`	`[number, number]`	本层级所定义的图缩放等级范围，当图缩放等级 zoom >= zoomRange[0] && zoom < zoomRange[1] 时，表示在该层级下
`primary`	`boolean`	是否为主层级，若为 `true` 则代表该层级的序号为 0，`zoomRange` 小于当前层级的，序号递减；大于当前层级的，序号递增。序号为在下面的图形配置中 `lod` 所对应的值。在 `ComboDisplayModelData.lodLevels` 中，应当只有一个层级为 `primary: true`

ComboDisplayModelData.animates

出现、消失、显示、隐藏、更新时，各个图形动画配置。支持一次更新，多个动画的顺序执行（order）。动画 DEMO。

是否必须: 否；
类型: IAnimates，定义如下：

interface IAnimates {
  buildIn?: IAnimate[]; // Combo 中某些图形创建时的动画
  buildOut?: IAnimate[]; // Combo 中某些图形销毁时的动画
  show?: IAnimate[]; // Combo 中某些图形从隐藏变为显示时的动画
  hide?: IAnimate[]; // Combo 中某些图形从显示变为隐藏时的动画
  update?: (IAnimate | IStateAnimate)[]; // Combo 中某些图形在相关数据或状态更新时的动画
}

其中，IAnimate 定义如下：

Name	Type	Default	Description
`IAnimate.fields`	`string[]`	`undefined`	该动画相关的图形样式属性名称，例如 `['fill', 'lineWidth']`
`IAnimate.shapeId`	`string`	`group`	该动画需要在哪个图形上执行，此处指定该图形的 ID。不指定则代表整个图形分组上的动画
`IAnimate.order?`	`number`	`0`	该动画在 `IAnimate[]` 中执行的顺序，借此可实现一次更新多个动画的顺序播放
`IAnimate.duration?`	`number`	`500`	该动画执行一次所使用的时间，该值越小，则动画速度越快
`IAnimate.iterations?`	`number`	`1`	该动画执行的次数，-1 代表循环执行
`IAnimate.easing?`	`string`	`'cubic-bezier(0.250, 0.460, 0.450, 0.940)'`	该动画的缓动函数，可以设置的值可参考 MDN easing 定义

IStateAnimate 定义如下，即在 IAnimate 基础上增加了一个指定状态的字段 states，表示该动画在这些状态变更的时候执行：

interface IStateAnimate extends IAnimate {
  states: string[];
}

ComboDisplayModelData.keyShape

Combo 主图形的样式配置。Combo 的主图形表达了 Combo 的主要形状。还用于计算边的连入位置。

是否必须: 否；
类型: ShapeStyle，根据不同的主图形，图形样式配置项不同。例如 'circle-combo' 的主图形是 'circle' 参考 Circle 图形样式；'rect-combo' 的主图形是 'rect' 参考 Rect 图形样式。

ComboDisplayModelData.haloShape

在内置的 Combo 和主题中，haloShape 指的是 Combo 在 active（一般在鼠标 hover 时该状态被触发）和 selected（一般在选中状态下该状态被触发）状态下，主图形 (keyShape) 周围展示的光晕效果的图形。在内置 Combo 的逻辑中，haloShape 的图形类型、颜色跟随主图形 (keyShape)。

是否必须: 否；
类型: ShapeStyle，haloShape 的图形类型跟随主图形(keyShape)。根据不同的主图形，图形样式配置项不同。例如 'circle-combo' 的主图形是 'circle' 参考 Circle 图形样式；'rect-combo' 的主图形是 'rect' 参考 Rect 图形样式。

ComboDisplayModelData.labelShape

Combo 的文本图形，内置 Combo 或继承内置 Combo（未复写相关内容）的自定义 Combo 均支持。

是否必须: 否；
类型:

  TextStyleProps & {
    /**
     * 文本相对于 Combo 主图形 (keyShape) 的位置，可指定方位以及在 combo 的内部或外部
     */
    position?: 'top' | 'bottom' | 'left' | 'right' | 'left-top' | 'ouside-top'| 'ouside-left' | 'ouside-right' | 'ouside-bottom';
    /**
     * 文本图形相对于主图形 (keyShape) 在 x 方向上的偏移量
     */
    offsetX?: number;
    /**
     * 文本图形相对于主图形 (keyShape) 在 y 方向上的偏移量
     */
    offsetY?: number;
    /**
     * 文本图形相对于主图形 (keyShape) 在 z 方向上的偏移量
     */
    offsetZ?: number;
    /**
     * 允许文本的最大宽度，若指定为数字，则表示像素值，若指定为带有 '%' 的文本，代表相对于主图形 (keyShape) 包围盒大小的百分比。默认值为 '200%'，表示文本图形的最大宽度不可以超过主图形宽度的两倍。若超过，则自动截断并在末尾增加省略号 '...'
     */
    maxWidth?: string | number;
    /**
     * 文本旋转角度（弧度制）
     */
    angle?: number;
  };

其中，相关的图形样式参考 TextStyleProps 文本图形样式。

ComboDisplayModelData.labelBackgroundShape

Combo 的文本的背景图形，是一个矩形。若不设置则不显示。设置为 {} 将使用主题中默认的样式显示文本背景图形。

是否必须: 否；
类型:

ShapeStyle & {
  padding?: number | number[]; // 文本距离背景矩形四周的留白距离
};

其中，参考矩形样式类型 RectStyleProps。

ComboDisplayModelData.badgeShapes

Combo 四周的徽标，单个徽标包括了 Combo 和背景图形，badgeShapes 配置的是多个徽标。

是否必须: 否；
类型:

  {
    /**
     * 徽标的背景颜色（对所有徽标生效，优先级低于下面单个徽标的 color 设置）
     */
    color?: string;
    /**
     * 徽标背景颜色的色板，意味着下面各个徽标将自动取用该色板中的颜色。
     * 优先级低于下面单个徽标的 color 设置
     */
    palette?: string[];
    /**
     * 徽标上文本的颜色（对所有徽标生效，优先级低于下面单个徽标的 textColor 设置）
     */
    textColor?: string;
    /**
     * 单个徽标的样式配置，由县局高于上面的配置
     */
    [key: number]: ShapeStyle & {
     /**
       * 该徽标的位置，支持的取值见下文
       */
      position?: IBadgePosition;
      /**
       * 该徽标的背景色
       */
      color?: string;
      /**
       * 该徽标的文本色
       */
      textColor?: string;
    };
  }

BadgePosition 取值如下：

Value	Description
`'rightTop'`	右上角，推荐
`'right'`	右侧中间，推荐
`'rightBottom'`	右下角，推荐
`'leftTop'`	左上角
`'left'`	左侧中间
`'leftBottom'`	左下角
`'bottom'`	下方中间
`'top'`	上方中间
`'bottomRight'`	右下角，同 `'rightBottom'`
`'bottomLeft'`	左下角，同 `'leftBottom'`
`'topRight'`	右上角，同 `'rightTop'`
`'topLeft'`	左上角，同 `'leftTop'`

ComboDisplayModelData.anchorShapes

Combo 四周的边连入位置圆形图形（连接桩），anchorShapess 配置的是多个连接桩。

是否必须: 否；
类型:

// 外层可配置对所有连接桩（圆形）的样式，优先级低于单独的连接桩配置
CircleStyleProps & {
  // 单独的连接桩图形配置，优先级高于外层的 CircleStyleProps
  [key: number]: CircleStyleProps & {
    // 该连接桩的位置，可配置字符串或数字数组表示相对于主图形 (keyShape) 包围盒的百分比位置，例如 [0.5, 1] 表示位于主图形的右侧中间
    position?: 'top' | 'left' | 'bottom' | 'right' | [number, number];
  };
};

其中，相关的图形样式参考 CircleStyleProps 圆形图形样式。

ComboDisplayModelData.otherShapes

上面所有的 xxShape(s) 均为 G6 定义的规范 Combo 中可能存在的图形。自定义 Combo 中的其他图形应当定义和配置在 otherShapes 中。

是否必须: 否；
类型:

{
  // key 为图形 id，规范格式为 xxShape
  // value 为图形样式配置（不同图形配置不同，见图形相关文档），以及图形的动画
  [shapeId: string]: ShapeStyleProps;
}

其中，不同的图形样式参考图形样式目录下对应的图形类型文档。

12 KiB Raw Blame History Unescape Escape

id