Custom Plugin

Reading needs 2 minutes

Watermark

Data Transformation Overview

Implement Plugin

Similar to interactions, the implementation of plugins is also quite flexible, and you can implement your plugins in the style you prefer.

Below is an example of a simple custom plugin that automatically loads remote data during the graph instantiation process:

import { BasePlugin } from '@antv/g6';
import type { BasePluginOptions, RuntimeContext } from '@antv/g6';

interface RemoteDataSourceOptions extends BasePluginOptions {}

class RemoteDataSource extends BasePlugin<RemoteDataSourceOptions> {
  constructor(context: RuntimeContext, options: RemoteDataSourceOptions) {
    super(context, options);
    this.loadData();
  }

  private async loadData() {
    // mock remote data
    const data = {
      nodes: [
        { id: 'node-1', x: 100, y: 100 },
        { id: 'node-2', x: 200, y: 200 },
      ],
      edges: [{ source: 'node-1', target: 'node-2' }],
    };

    const { graph } = this.context;
    graph.setData(data);
    await graph.render();
  }
}

In the example above, we have simulated the implementation of a data loading plugin. After using this plugin, there is no need to pass in data when instantiating the Graph; the plugin will automatically load remote data.

(() => {
  const { BasePlugin, Graph, register, ExtensionCategory } = window.g6;

  class RemoteDataSource extends BasePlugin {
    constructor(context, options) {
      super(context, options);
      this.loadData();
    }

    async loadData() {
      // mock remote data
      const data = {
        nodes: [
          { id: 'node-1', style: { x: 25, y: 50 } },
          { id: 'node-2', style: { x: 175, y: 50 } },
        ],
        edges: [{ source: 'node-1', target: 'node-2' }],
      };

      const { graph } = this.context;
      graph.setData(data);
      await graph.render();
    }
  }

  register(ExtensionCategory.PLUGIN, 'remote-data-source', RemoteDataSource);

  const container = window.createContainer({ width: 200, height: 100 });

  const graph = new Graph({
    container,
    width: 200,
    height: 100,
    plugins: ['remote-data-source'],
  });

  graph.render();

  return container;
})();

G6

Custom Plugin

Overview

Implement Plugin

Register Plugin

Configure Plugin