自定义插件

阅读时间约 2 分钟

Watermark 水印

数据处理总览

实现插件

与交互类似，插件的实现也相当灵活，你可以以你喜欢的风格实现你的插件。

下面是一个简单的自定义插件实现，在图实例化过程中会自动加载远程数据：

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();
  }
}

在上面的例子中，我们模拟实现了一个数据加载插件，在使用该插件后，实例化 Graph 时不用再传入数据，该插件会自动加载远程数据。

(() => {
  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

自定义插件

概述

实现插件

注册插件

配置插件