Legend

Overview

The Legend plugin is used to display classification information of elements in the graph, supporting the display of classification information for nodes, edges, and combos. Through the legend, users can quickly perceive the classification information of related elements in the graph and quickly locate elements by clicking on the corresponding legend items, improving user browsing efficiency.

Usage Scenarios

This plugin is mainly used for:

Quickly classifying elements through the legend
Quickly highlighting and locating corresponding elements through the legend

Basic Usage

const data = {
  nodes: [
    { id: 'node-1', type: 'circle', data: { cluster: 'node-type1' } },
    { id: 'node-2', type: 'rect', data: { cluster: 'node-type2' } },
  ],
  edges: [{ source: 'node-1', target: 'node-2', data: { cluster: 'edge-type1' } }],
};

const graph = new Graph({
  data,
  // Other configurations...
  plugins: [
    {
      type: 'legend', // Plugin type is legend
      nodeField: 'cluster', // Array field name for node grouping
      edgeField: 'cluster', // Array field name for edge grouping
    },
  ],
});

Configuration Options

Property	Description	Type	Default Value	Required
type	Plugin type	string	`legend`	✓
key	Unique identifier for the plugin, used for subsequent updates	string	-
trigger	How the legend item triggers the corresponding item highlight: - `hover`: Triggered when the mouse enters the legend item - `click`: Triggered when the mouse clicks the legend item	`hover` \| `click`	`hover`
position	Relative position of the legend on the canvas, optional values	CardinalPlacement	`bottom`
container	Container to which the legend is mounted, if not provided, it is mounted to the container where the Graph is located	HTMLElement \| string	-
className	Legend canvas class name, not effective when an external container is passed	string	-
containerStyle	Style of the legend container, not effective when an external container is passed	CSSStyleDeclaration	-
nodeField	Node classification identifier	string \| (item: ElementDatum) => string	-
edgeField	Edge classification identifier	string \| (item: ElementDatum) => string	-
comboField	Combo classification identifier	string \| (item: ElementDatum) => string	-
orientation	Layout direction of legend items: - `horizontal`: Horizontal direction - `vertical`: Vertical direction	`horizontal` \| `vertical`	'horizontal'
layout	Layout method: - `flex`: Flexible layout - `grid`: Grid layout	`flex` \| `grid`	`flex`
showTitle	Whether to display the title	boolean	false
titleText	Title content	string	""
x	Relative horizontal position of the legend on the canvas, higher priority than position	number	-
y	Relative vertical position of the legend on the canvas, higher priority than position	number	-
width	Width of the legend	number	240
height	Height of the legend	number	160
itemSpacing	Spacing between the text of the legend item and the corresponding marker	number	4
rowPadding	Spacing between each row in the legend	number	10
colPadding	Spacing between each column in the legend	number	10
itemMarkerSize	Size of the legend item marker	number	16
itemLabelFontSize	Font size of the legend item text	number	16
gridCol	Maximum number of columns allowed for legend items when width permits	number	-
gridRow	Maximum number of rows allowed for legend items when height permits	number	-

CardinalPlacement

The position property supports the following values:

'top-left': Top left corner
'top-right': Top right corner
'bottom-left': Bottom left corner
'bottom-right': Bottom right corner
'left-top': Left side near the top
'left-bottom': Left side near the bottom
'right-top': Right side near the top
'right-bottom': Right side near the bottom

Code Examples

Basic Legend

const data = {
  nodes: [
    { id: 'node-1', type: 'circle', data: { cluster: 'node-type1' } },
    { id: 'node-2', type: 'rect', data: { cluster: 'node-type2' } },
  ],
  edges: [{ source: 'node-1', target: 'node-2', data: { cluster: 'edge-type1' } }],
};

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      type: 'legend', // Plugin type is legend
      nodeField: 'cluster', // Array field name for node grouping
      edgeField: 'cluster', // Array field name for edge grouping
    },
  ],
});

Custom Legend Position

const data = {
  nodes: [
    { id: 'node-1', type: 'circle', data: { cluster: 'node-type1' } },
    { id: 'node-2', type: 'rect', data: { cluster: 'node-type2' } },
  ],
  edges: [{ source: 'node-1', target: 'node-2', data: { cluster: 'edge-type1' } }],
};

const graph = new Graph({
  data,
  // Other configurations...
  plugins: [
    {
      type: 'legend',
      nodeField: 'cluster',
      edgeField: 'cluster',
      // You can quickly specify the position through position
      // position: "top-left",
      // Or you can more flexibly control the position of the legend through x, y
      x: 20,
      y: 20,
    },
  ],
});

Custom Legend Item Layout

const data = {
  nodes: [
    { id: 'node-1', type: 'circle', data: { cluster: 'node-type1' } },
    { id: 'node-2', type: 'rect', data: { cluster: 'node-type2' } },
  ],
  edges: [{ source: 'node-1', target: 'node-2', data: { cluster: 'edge-type1' } }],
};

const graph = new Graph({
  data,
  // Other configurations...
  plugins: [
    {
      type: 'legend',
      nodeField: 'cluster',
      edgeField: 'cluster',
      layout: 'flex',
      // Control to display only one row
      gridRow: 1,
      // Control to display 10 columns in one row, a page button will be displayed when the column width is insufficient
      gridCol: 10,
    },
  ],
});

Common Issues

1. Setting orientation is ineffective?

orientation mainly controls the direction of the layout, and the specific display of multiple columns in one row or multiple rows in one column is mainly controlled by gridRow and gridCol. For example, if you want it to look like a vertical legend item, you can configure it like this:

plugins: [
    {
      type: 'legend',
      nodeField: 'cluster',
      edgeField: 'cluster',
      layout: "flex",
      // Control to display 1 column in one row
      gridCol:1,
      // Control to display up to 20 rows
      gridRow: 20,
    },
  ],

This way, it becomes a legend with only one column, conforming to the visual vertical arrangement.

You can use the updatePlugin method to dynamically update the toolbar:

const graph = new Graph({
  data,
  // Other configurations...
  plugins: [
    {
      type: 'legend',
      key: 'my-legend',
      nodeField: 'cluster',
      edgeField: 'cluster',
    },
  ],
});

// Update legend position
graph.updatePlugin({
  key: 'my-legend',
  position: 'bottom-right',
});

Practical Cases

Overview

Usage Scenarios

This plugin is mainly used for:

Quickly classifying elements through the legend
Quickly highlighting and locating corresponding elements through the legend

Basic Usage

const data = {
  nodes: [
    { id: 'node-1', type: 'circle', data: { cluster: 'node-type1' } },
    { id: 'node-2', type: 'rect', data: { cluster: 'node-type2' } },
  ],
  edges: [{ source: 'node-1', target: 'node-2', data: { cluster: 'edge-type1' } }],
};

const graph = new Graph({
  data,
  // Other configurations...
  plugins: [
    {
      type: 'legend', // Plugin type is legend
      nodeField: 'cluster', // Array field name for node grouping
      edgeField: 'cluster', // Array field name for edge grouping
    },
  ],
});

Configuration Options

Property	Description	Type	Default Value	Required
type	Plugin type	string	`legend`	✓
key	Unique identifier for the plugin, used for subsequent updates	string	-
trigger	How the legend item triggers the corresponding item highlight: - `hover`: Triggered when the mouse enters the legend item - `click`: Triggered when the mouse clicks the legend item	`hover` \| `click`	`hover`
position	Relative position of the legend on the canvas, optional values	CardinalPlacement	`bottom`
container	Container to which the legend is mounted, if not provided, it is mounted to the container where the Graph is located	HTMLElement \| string	-
className	Legend canvas class name, not effective when an external container is passed	string	-
containerStyle	Style of the legend container, not effective when an external container is passed	CSSStyleDeclaration	-
nodeField	Node classification identifier	string \| (item: ElementDatum) => string	-
edgeField	Edge classification identifier	string \| (item: ElementDatum) => string	-
comboField	Combo classification identifier	string \| (item: ElementDatum) => string	-
orientation	Layout direction of legend items: - `horizontal`: Horizontal direction - `vertical`: Vertical direction	`horizontal` \| `vertical`	'horizontal'
layout	Layout method: - `flex`: Flexible layout - `grid`: Grid layout	`flex` \| `grid`	`flex`
showTitle	Whether to display the title	boolean	false
titleText	Title content	string	""
x	Relative horizontal position of the legend on the canvas, higher priority than position	number	-
y	Relative vertical position of the legend on the canvas, higher priority than position	number	-
width	Width of the legend	number	240
height	Height of the legend	number	160
itemSpacing	Spacing between the text of the legend item and the corresponding marker	number	4
rowPadding	Spacing between each row in the legend	number	10
colPadding	Spacing between each column in the legend	number	10
itemMarkerSize	Size of the legend item marker	number	16
itemLabelFontSize	Font size of the legend item text	number	16
gridCol	Maximum number of columns allowed for legend items when width permits	number	-
gridRow	Maximum number of rows allowed for legend items when height permits	number	-

CardinalPlacement

The position property supports the following values:

'top-left': Top left corner
'top-right': Top right corner
'bottom-left': Bottom left corner
'bottom-right': Bottom right corner
'left-top': Left side near the top
'left-bottom': Left side near the bottom
'right-top': Right side near the top
'right-bottom': Right side near the bottom

Code Examples

Basic Legend

const data = {
  nodes: [
    { id: 'node-1', type: 'circle', data: { cluster: 'node-type1' } },
    { id: 'node-2', type: 'rect', data: { cluster: 'node-type2' } },
  ],
  edges: [{ source: 'node-1', target: 'node-2', data: { cluster: 'edge-type1' } }],
};

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      type: 'legend', // Plugin type is legend
      nodeField: 'cluster', // Array field name for node grouping
      edgeField: 'cluster', // Array field name for edge grouping
    },
  ],
});

Custom Legend Position

const data = {
  nodes: [
    { id: 'node-1', type: 'circle', data: { cluster: 'node-type1' } },
    { id: 'node-2', type: 'rect', data: { cluster: 'node-type2' } },
  ],
  edges: [{ source: 'node-1', target: 'node-2', data: { cluster: 'edge-type1' } }],
};

const graph = new Graph({
  data,
  // Other configurations...
  plugins: [
    {
      type: 'legend',
      nodeField: 'cluster',
      edgeField: 'cluster',
      // You can quickly specify the position through position
      // position: "top-left",
      // Or you can more flexibly control the position of the legend through x, y
      x: 20,
      y: 20,
    },
  ],
});

Custom Legend Item Layout

const data = {
  nodes: [
    { id: 'node-1', type: 'circle', data: { cluster: 'node-type1' } },
    { id: 'node-2', type: 'rect', data: { cluster: 'node-type2' } },
  ],
  edges: [{ source: 'node-1', target: 'node-2', data: { cluster: 'edge-type1' } }],
};

const graph = new Graph({
  data,
  // Other configurations...
  plugins: [
    {
      type: 'legend',
      nodeField: 'cluster',
      edgeField: 'cluster',
      layout: 'flex',
      // Control to display only one row
      gridRow: 1,
      // Control to display 10 columns in one row, a page button will be displayed when the column width is insufficient
      gridCol: 10,
    },
  ],
});

Common Issues

1. Setting orientation is ineffective?

plugins: [
    {
      type: 'legend',
      nodeField: 'cluster',
      edgeField: 'cluster',
      layout: "flex",
      // Control to display 1 column in one row
      gridCol:1,
      // Control to display up to 20 rows
      gridRow: 20,
    },
  ],

This way, it becomes a legend with only one column, conforming to the visual vertical arrangement.

You can use the updatePlugin method to dynamically update the toolbar:

const graph = new Graph({
  data,
  // Other configurations...
  plugins: [
    {
      type: 'legend',
      key: 'my-legend',
      nodeField: 'cluster',
      edgeField: 'cluster',
    },
  ],
});

// Update legend position
graph.updatePlugin({
  key: 'my-legend',
  position: 'bottom-right',
});

G6

Legend

G6

Legend

Overview

Usage Scenarios

Basic Usage

Configuration Options

CardinalPlacement

Code Examples

Basic Legend

Custom Legend Position

Custom Legend Item Layout

Common Issues

1. Setting orientation is ineffective?

Practical Cases

Overview

Usage Scenarios

Basic Usage

Configuration Options

CardinalPlacement

Code Examples

Basic Legend

Custom Legend Position

Custom Legend Item Layout

Common Issues

1. Setting orientation is ineffective?

Practical Cases

Legend

Legend

Overview

Usage Scenarios

Basic Usage

Configuration Options

CardinalPlacement

Code Examples

Basic Legend

Custom Legend Position

Custom Legend Item Layout

Common Issues

1. Setting orientation is ineffective?

2. How to dynamically update the toolbar?

Practical Cases

Overview

Usage Scenarios

Basic Usage

Configuration Options

CardinalPlacement

Code Examples

Basic Legend

Custom Legend Position

Custom Legend Item Layout

Common Issues

1. Setting orientation is ineffective?

2. How to dynamically update the toolbar?

Practical Cases