Graphin Documentation

Graphin (Graph Insight) is a lightweight React toolkit for graph analysis built on top of G6. It provides two distinct ways to work with graph visualizations depending on your integration needs:

1. Graphin: A canvas component designed for graph visualization scenarios. It is best used when you need a flexible React component to embed graph canvases into your application.
2. GISDK (@antv/gi-sdk): A higher-level module designed for complete graph visualization analysis. It allows you to render full analysis modules through configuration and assets, making it suitable for complex graph analysis scenarios.

The technical foundation of both is a combination of G6 and React.

An Application configuration object defines the core structure of your graph application. It includes:

1. Metadata: Application name and version.
2. Dataset: Data source configuration (local or remote).
3. Spec: Contains graph (G6 canvas settings) and widgets (UI components).

const config: Application = {
  version: '0.1',
  metadata: {
    name: 'Test Application',
  },
  dataset: { ... }, // Dataset configuration
  spec: {
    graph: { ... },  // G6 canvas configuration
    widgets: [ ... ]  // Component configuration
  }
 };

Graphin is a lightweight React toolkit for graph analysis built on top of G6. It provides two distinct ways to integrate into your project depending on your needs:

1. Graphin (@antv/graphin): Acts as a canvas component. It is best suited for general graph visualization scenarios where you want to control the rendering within a React environment.
2. GISDK (@antv/gi-sdk): A higher-level module that renders complete graph visualization analysis modules using configuration and assets. It is designed for complex graph analysis scenarios.

The relationship between these components is hierarchical: GISDK builds upon the capabilities of Graphin.

Service assets define data fetching or processing modules. Implement the ImplementService interface, where the service function receives properties (from the config) and returns the processed data.

import type { ImplementService } from '@antv/gi-sdk';

export const FetchData: ImplementService = {
  version: '0.1',
  metadata: {
    name: 'FetchData',
    description: 'Fetch data via fetch',
  },
  service: ({ properties: { url } }) => {
    return fetch(url).then((res) => res.json());
  },
};

To use your custom widgets and services, bundle them into an AssetPackage object.

import type { AssetPackage } from '@antv/gi-sdk';
import { Toolbar } from './widgets';
import { FetchData } from './services';

export const MyAssetPackage: AssetPackage = {
  version: '0.1',
  metadata: {
    name: 'MyAssetPackage',
    displayName: 'Test Asset Package',
  },
  widgets: [ Toolbar, ... ],
  services: [ FetchData, ... ],
};

Install the GISDK package via npm or yarn to use it as a React component for building Graph Insight Applications.

$ npm install @antv/gi-sdk
# or
$ yarn add @antv/gi-sdk

Component assets (widgets) are the building blocks of the UI. To create one, implement the ImplementWidget interface, providing metadata and a React component function.

import React from 'react';
import type { ImplementWidget } from '@antv/gi-sdk';

export const Toolbar: ImplementWidget = {
  version: '0.1',
  metadata: {
    name: 'Toolbar',
    displayName: 'Toolbar',
  },
  component: () => {
    return <div>Toolbar</div>
  },
};

Install the @antv/gi-core-assets package using npm or yarn. This package provides the essential core assets required for building graph applications and is designed to be used alongside @antv/gi-sdk.

$ npm install @antv/gi-core-assets
# or
$ yarn add @antv/gi-core-assets

You can install Graphin using npm or yarn. It is a lightweight React toolkit for graph analysis based on G6.

$ npm install @antv/graphin

$ yarn add @antv/graphin

An Application configuration defines the version, metadata, dataset, and the spec (which includes the graph canvas configuration and widgets configuration).

const config: Application = {
  version: '0.1',
  metadata: {
    name: '测试应用',
  },
  dataset: { ... }, // See Dataset Configuration
  spec: {
    graph: { ... },  // G6 Options
    widgets: [ ... ]  // Widgets Configs
  }
 };

Render a graph application by passing a config object (describing the application structure) and an assets array (containing asset packages like core assets or custom ones) to the GISDK component.

import React from 'react';
import { GISDK } from '@antv/gi-sdk';
import { myAssetPackage } from './assets';
import { config } from './config';

export default () => {
  const assets = [myAssetPackage];

  return <GISDK className="my-graph-application" style={{ height: '80vh' }} config={config} assets={assets} />;
};