g6/packages/site/docs/apis/data/EdgeDisplayModel.en.md

title	order
EdgeDisplayModel	11

EdgeDisplayModel (edge rendering/display data) is the result of mapping the EdgeModel (internal flow data) configured on the graph instance using the mapper (specification.edge). It is only consumed internally for rendering and will not be consumed anywhere else. The data type inherits from the EdgeModel data type EdgeModel and is extended as follows:

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

id

The unique ID of the edge. Once the edge is created, the ID cannot be modified.

• Required: True;
• Type: string|number

source

The ID of the source node of the edge. It should correspond to an item in nodes, otherwise the edge data will not be added to the graph.

• Required: True;
• Type: string|number

target

The ID of the target node of the edge. It should correspond to an item in nodes, otherwise the edge data will not be added to the graph.

• Required: True;
• Type: string|number

data

The data in EdgeDisplayModelData is the result of the EdgeModel being mapped through the mapper (specification.edge) configured on the Graph instance. It should store all the contents of the EdgeModel, as well as many graphic style configurations.

• Required: True;
• Type: EdgeDisplayModelData，extended from EdgeModel with additional content as described below:

EdgeDisplayModelData.lodLevels

Specifies how the graph zoom levels are divided for this edge. It is an array of zoom level ranges, representing the division of zoom levels. One of them should have primary set to true, indicating that the index of this level is 0. lodLevels with zoomRange smaller than the current zoom level should have decreasing indices, while those with zoomRange larger than the current zoom level should have increasing indices. The index corresponds to the value of lod in the graphic configuration below.

• Required: False;
• Type: LodLevel[], where LodLevel is as follows:

Name	Type	Description
zoomRange	[number, number]	The range of zoom levels defined for this level. When the graph zoom level zoom >= zoomRange[0] && zoom < zoomRange[1], it means it is at this level
primary	boolean	Whether it is the primary level. If true, it means the index of this level is 0. The indices of levels smaller than the current level decrease, while those larger than the current level increase. There should be only one level with primary: true in EdgeDisplayModelData.lodLevels. The index corresponds to the value of lod in the graphic configuration below

EdgeDisplayModelData.animates

Animations for the appearance, disappearance, display, hiding, and updating of various graphics in the edge. Supports sequential execution of multiple animations in one update (order). Animation Demo.

• Required: False;
• Type: IAnimates, defined as follows:

interface IAnimates {
  buildIn?: IAnimate[]; // Animation when certain graphics in the edge are created
  buildOut?: IAnimate[]; // Animation when certain graphics in the edge are destroyed
  show?: IAnimate[]; // Animation when certain graphics in the edge transition from hidden to visible
  hide?: IAnimate[]; // Animation when certain graphics in the edge transition from visible to hidden
  update?: (IAnimate | IStateAnimate)[]; // Animation when certain graphics in the edge are updated based on related data or states
}

Among them, IAnimate is defined as follows:

Name	Type	Default	Description
IAnimate.fields	string[]	undefined	The names of the graphic style properties related to this animation, for example, ['fill', 'lineWidth']
IAnimate.shapeId	string	group	The ID of the graphic on which this animation is to be performed. If not specified, it means the animation is performed on the entire graphic group
IAnimate.order?	number	0	The order in which this animation is executed among IAnimate[], allowing for sequential playback of multiple animations during one update
IAnimate.duration?	number	500	The duration of this animation, the smaller the value, the faster the animation speed
IAnimate.iterations?	number	1	The number of times this animation is executed, -1 represents looping execution
IAnimate.easing?	string	'cubic-bezier(0.250, 0.460, 0.450, 0.940)'	The easing function of this animation, the possible values can be referred to MDN easing definition

IStateAnimate is defined as follows, which adds a field states specifying the states in which this animation is executed to IAnimate:

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

EdgeDisplayModelData.keyShape

The style configuration of the key shape of the edge. The key shape of the edge is the overall path shape of the edge.

• Required: False;
• Type: ShapeStyle, the shape style configuration of the key shape depends on the different main shapes. For example, the key shape of 'line-edge' is 'line', please refer to Line shape style; the key shape of 'cubic-edge' is 'path', please refer to Path shape style.

EdgeDisplayModelData.iconShape

The icon shape of the edge (built-in edge support, custom edges that inherit these built-in edges also support it without overriding the relevant content). It is located in front of the text. It can be an image or text, and text supports iconfont.

• Required: False;
• Type:

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

Among them, the related graphics styles refer to TextStylePropstext shape style and ImageStyleProps image shape style.

EdgeDisplayModelData.haloShape

In built-in edges and themes, haloShape refers to the halo effect displayed around the key shape (keyShape) of the edge in the active state (usually triggered when the mouse hovers over) and the selected state (usually triggered in the selected state). In the logic of built-in edges, the graphic type and color of haloShape follow the key shape (keyShape).

• Required: False;
• Type: ShapeStyle, the graphic type of haloShape follows the key shape (keyShape). The shape style configuration is different for different main shapes. For example, the key shape of 'line-edge' is 'line', please refer to Line shape style; the key shape of 'cubic-edge' is 'path', please refer to Path shape style.

EdgeDisplayModelData.labelShape

The text shape of the edge, both built-in edges and custom edges that inherit the built-in edges (without overriding the relevant content) support it.

• Required: False;
• Type:

  TextStyleProps & {
    /**
     * The position of the text relative to the key shape (keyShape) of the edge, which supports the start, middle, and end of the edge
     */
    position?: 'start' | 'middle' | 'end';
    /**
     * The offset of the text shape relative to the key shape (keyShape) of the edge in the x direction
     */
    offsetX?: number;
    /**
     * The offset of the text shape relative to the key shape (keyShape) of the edge in the y direction
     */
    offsetY?: number;
    /**
     * The offset of the text shape relative to the key shape (keyShape) of the edge in the z direction
     */
    offsetZ?: number;
    /**
     * The maximum width allowed for the text, if specified as a number, it represents the pixel value, if specified as text with '%', it represents the percentage of the size of the key shape (keyShape). The default value is '60%', which means that the maximum width of the text shape cannot exceed twice the width of the key shape. If it exceeds, it will be automatically truncated and an ellipsis '...' will be added at the end.
     */
    maxWidth?: string | number;
    /**
     * Whether the text rotates with the edge
     */
    autoRotate?: boolean;
  };

Among them, the related graphic styles refer to TextStyleProps text shape style.

EdgeDisplayModelData.labelBackgroundShape

The background shape of the text of the edge, which is a rectangle. If not set, it will not be displayed. Setting it to {} will use the default style in the theme to display the background shape of the text.

• Required: False;
• Type:

ShapeStyle & {
  padding?: number | number[]; // The padding distance between the text and the background rectangle
};

Among them, please refer to the rectangle style type RectStyleProps.

EdgeDisplayModelData.

The badge of the edge, including text and background shape. Unlike nodes that support multiple badges, the built-in edge only supports one badge, which is located behind the text.

• Required: False;
• Type:

  ShapeStyleProps & {
    /**
     * The background color of the badge
     */
    color?: string;
    /**
     * The color of the text on the badge
     */
    textColor?: string;
  }

EdgeDisplayModelData.otherShapes

上面所有的 xxShape(s) 均为 G6 All the xxShape(s) mentioned above are possible graphics in the standard edge defined by G6. Other graphics in custom edges should be defined and configured in otherShapes.

• Required: False;
• Type:

{
  // The key is the graphic id, the format specified by the specification is xxShape
  // The value is the graphic style configuration (different graphics have different configurations, see the relevant graphics documentation) and the animation of the graphic
  [shapeId: string]: ShapeStyleProps;
}

Among them, different graphic styles refer to the corresponding graphic type documents under the Shape Style directory.