g6/EdgeDisplayModel.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

11 KiB

Raw Blame History

title	order
EdgeDisplayModel 渲染数据	11

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

interface EdgeDisplayModel {
  id: string | number;
  source: string | number;
  target: string | number;
  data: EdgeDisplayModelData; // 扩展了 EdgeModelData
}

id

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

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

source

边起始节点的 ID，应与 nodes 中的一项对应，否则该边数据不会被加入到图中。

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

target

边结束节点的 ID，应与 nodes 中的一项对应，否则该边数据不会被加入到图中。

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

data

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

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

EdgeDisplayModelData.lodLevels

对于该边而言，设定图缩放等级的划分方式。是一个缩放系数范围的数组，表示缩放等级的划分。其中有一项的 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` 所对应的值。在 `EdgeDisplayModelData.lodLevels` 中，应当只有一个层级为 `primary: true`

EdgeDisplayModelData.animates

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

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

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

其中，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[];
}

EdgeDisplayModelData.keyShape

边主图形的样式配置。边的主图形是边的整体路径图形。

是否必须: 否；
类型: ShapeStyle，根据不同的主图形，图形样式配置项不同。例如 'line-edge' 的主图形是 'line' 参考 Line 图形样式；'cubic-edge' 的主图形是 'path' 参考 Path 图形样式。

EdgeDisplayModelData.iconShape

边的图标图形（内置边支持，继承这些内置边的自定义边在无复写相关内容的情况下同样支持），位于文本前方。可以是图片或文本，文本支持 iconfont。

是否必须: 否；
类型:

Partial<
  TextStyleProps &
    ImageStyleProps &
    ShapeStyle & {
      offsetX?: number;
      offsetY?: number;
      lod?: number;
    }
>;

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

EdgeDisplayModelData.haloShape

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

是否必须: 否；
类型: ShapeStyle，haloShape 的图形类型跟随主图形(keyShape)。根据不同的主图形，图形样式配置项不同。例如 'line-edge' 的主图形是 'line' 参考 Line 图形样式；'cubic-edge' 的主图形是 'path' 参考 Path 图形样式。

EdgeDisplayModelData.labelShape

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

是否必须: 否；
类型:

  TextStyleProps & {
    /**
     * 文本相对于边主图形 (keyShape) 的位置，支持在边的起始处、中央、结束处
     */
    position?: 'start' | 'middle' | 'end';
    /**
     * 文本图形相对于主图形 (keyShape) 在 x 方向上的偏移量
     */
    offsetX?: number;
    /**
     * 文本图形相对于主图形 (keyShape) 在 y 方向上的偏移量
     */
    offsetY?: number;
    /**
     * 文本图形相对于主图形 (keyShape) 在 z 方向上的偏移量
     */
    offsetZ?: number;
    /**
     * 允许文本的最大宽度，若指定为数字，则表示像素值，若指定为带有 '%' 的文本，代表相对于主图形 (keyShape) 包围盒大小的百分比。默认值为 '60%'，表示文本图形的最大宽度不可以超过主图形宽度的两倍。若超过，则自动截断并在末尾增加省略号 '...'
     */
    maxWidth?: string | number;
    /**
     * 文本是否跟随边旋转
     */
    autoRotate?: boolean;
  };

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

EdgeDisplayModelData.labelBackgroundShape

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

是否必须: 否；
类型:

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

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

EdgeDisplayModelData.

边的徽标，包括了文本和背景图形。和节点支持多个徽标不同，内置边仅支持一个徽标，位于文本后方。

是否必须: 否；
类型:

  ShapeStyleProps & {
    /**
     * 徽标的背景颜色
     */
    color?: string;
    /**
     * 徽标上文本的颜色
     */
    textColor?: string;
  }

EdgeDisplayModelData.otherShapes

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

是否必须: 否；
类型:

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

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

11 KiB Raw Blame History Unescape Escape

id