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

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.

2. How to dynamically update the toolbar?

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

import { Graph } from '@antv/g6';

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

const graph = new Graph({
  container: 'container',
  data,
  node: {
    style: { size: 32 },
    palette: {
      field: 'cluster',
    },
  },
  layout: {
    type: 'force',
  },
  plugins: [
    {
      type: 'legend',
      nodeField: 'cluster',
      edgeField: 'cluster',
    },
  ],
});

graph.render();

import { Graph } from '@antv/g6';
import GUI from 'lil-gui';

export function addPanel(renderPanel: (gui: GUI) => void) {
  const gui = new GUI({ container: document.body });
  gui.title('Control');
  Object.assign(gui.domElement.style, { position: 'absolute', top: '0', right: '0', zIndex: '10' });
  renderPanel(gui);
  addEventListener('pagehide', () => gui.destroy(), { once: true });
}

export async function createGraph(
  options: ConstructorParameters<typeof Graph>[0],
  size: { width?: number; height?: number } = {},
  renderPanel?: (gui: GUI, graph: Graph) => void,
) {
  const container = document.createElement('div');
  Object.assign(container.style, {
    width: '100%',
    maxWidth: `${size.width || 600}px`,
    height: `${size.height || 400}px`,
  });
  document.getElementById('container')!.append(container);
  const graph = new Graph({ ...size, ...options, width: container.clientWidth, container, autoResize: true });
  addEventListener('pagehide', () => graph.destroy(), { once: true });
  await graph.render();
  if (renderPanel) addPanel((gui) => renderPanel(gui, graph));
  return container;
}