title: Built-in Extensions order: 4

The G6 built-in extensions and registered types are as follows:

Animations

Usage:

In GraphOptions.[node|edge|combo].animation.[stage], for example:

const graph = new Graph({
  // ... other options
  node: {
    animation: {
      update: 'translate', // Only use translation animation in the update stage
    },
  },
});

Behaviors

Usage:

In GraphOptions.behaviors, for example:

const graph = new Graph({
  // ... other options
  behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
});

Elements

Nodes

Usage:

1. In GraphOptions.data.nodes[number].type; 2. In GraphOptions.node.type;

const graph = new Graph({
  // ... other options
  data: {
    nodes: [{ id: 'node-1', type: 'circle' }],
  },
  node: {
    type: 'circle',
  },
});

Edges

Usage(like Nodes):

1. In GraphOptions.data.edges[number].type; 2. In GraphOptions.edge.type;

Combos

Usage(like Nodes):

1. In GraphOptions.data.combos[number].type; 2. In GraphOptions.combo.type;

Layouts

Usage:

In GraphOptions.layout, for example:

const graph = new Graph({
  // ... other options
  layout: {
    type: 'force',
  },
});

Palettes

• spectral

• tableau

• oranges

• greens

• blues

Usage:

In GraphOptions.[node|edge|combo].palette, for example:

const graph = new Graph({
  // ... other options
  node: {
    palette: 'tableau',
  },
});

Themes

Usage:

In GraphOptions.theme, for example:

const graph = new Graph({
  // ... other options
  theme: 'dark',
});

Plugins

Usage:

In GraphOptions.plugins, for example:

const graph = new Graph({
  // ... other options
  plugins: ['minimap', 'contextmenu'],
});

Transforms

Usage:

In GraphOptions.transform, for example:

const graph = new Graph({
  // ... other options
  transform: ['process-parallel-edges', 'place-radial-labels'],
});

Shapes

Usage:

In the upsert method of the element class when customizing the shape, pass the second parameter:

this.upsert('shape-key', 'text', { text: 'label', fontSize: 16 }, this);