G6 Graph Visualization Engine

https://g6.antv.antgroup.com/en/
Admin
G6 is an analytical, high-performance, and flexible graph visualization and analysis engine focused...
Tokens:321,537
Snippets:2,077
Trust Score:9.6
Update:1 month ago
Show doc for...
Tokens:
Raw
### Full Graph Implementation with Focus

Source: https://g6.antv.antgroup.com/en/manual/behavior/focus-element

A complete example showing data setup and graph initialization with both collapse-expand and focus-element behaviors.

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


const data = {
  nodes: [
    { id: 'node1', combo: 'combo1', style: { x: 110, y: 150 } },
    { id: 'node2', combo: 'combo1', style: { x: 190, y: 150 } },
    { id: 'node3', combo: 'combo2', style: { x: 150, y: 260 } },
  ],
  edges: [{ source: 'node1', target: 'node2' }],
  combos: [{ id: 'combo1', combo: 'combo2' }, { id: 'combo2' }],
};


const graph = new Graph({
  container: 'container',
  node: {
    style: { labelText: (d) => d.id },
  },
  data,
  behaviors: ['collapse-expand', 'focus-element'],
});


graph.render();
```

--------------------------------

### Full Toolbar Implementation Example

Source: https://g6.antv.antgroup.com/en/manual/plugin/toolbar

A complete setup including graph data, layout, behaviors, and a toolbar with built-in icon definitions.

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


const data = {
  nodes: [{ id: 'node-0' }, { id: 'node-1' }, { id: 'node-2' }, { id: 'node-3' }, { id: 'node-4' }, { id: 'node-5' }],
  edges: [
    { source: 'node-0', target: 'node-1' },
    { source: 'node-0', target: 'node-2' },
    { source: 'node-0', target: 'node-3' },
    { source: 'node-0', target: 'node-4' },
    { source: 'node-1', target: 'node-0' },
    { source: 'node-2', target: 'node-0' },
    { source: 'node-3', target: 'node-0' },
    { source: 'node-4', target: 'node-0' },
    { source: 'node-5', target: 'node-0' },
  ],
};


const graph = new Graph({
  container: 'container',
  data,
  layout: {
    type: 'grid',
  },
  behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],
  plugins: [
    {
      type: 'toolbar',
      position: 'top-left',
      onClick: (item) => {
        alert('item clicked:' + item);
      },
      getItems: () => {
        // G6 内置了 9 个 icon，分别是 zoom-in、zoom-out、redo、undo、edit、delete、auto-fit、export、reset
        return [
          { id: 'zoom-in', value: 'zoom-in' },
          { id: 'zoom-out', value: 'zoom-out' },
          { id: 'redo', value: 'redo' },
          { id: 'undo', value: 'undo' },
          { id: 'edit', value: 'edit' },
          { id: 'delete', value: 'delete' },
          { id: 'auto-fit', value: 'auto-fit' },
          { id: 'export', value: 'export' },
          { id: 'reset', value: 'reset' },
        ];
      },
    },
  ],
});


graph.render();
```

```javascript
import { Graph } from '@antv/g6'; const data = { nodes: [{ id: 'node-0' }, { id: 'node-1' }, { id: 'node-2' }, { id: 'node-3' }, { id: 'node-4' }, { id: 'node-5' }], edges: [ { source: 'node-0', target: 'node-1' }, { source: 'node-0', target: 'node-2' }, { source: 'node-0', target: 'node-3' }, { source: 'node-0', target: 'node-4' }, { source: 'node-1', target: 'node-0' }, { source: 'node-2', target: 'node-0' }, { source: 'node-3', target: 'node-0' }, { source: 'node-4', target: 'node-0' }, { source: 'node-5', target: 'node-0' }, ], }; const graph = new Graph({ container: 'container', data, layout: { type: 'grid', }, behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'], plugins: [ { type: 'toolbar', position: 'top-left', onClick: (item) => { alert('item clicked:' + item); }, getItems: () => { // G6 内置了 9 个 icon，分别是 zoom-in、zoom-out、redo、undo、edit、delete、auto-fit、export、reset return [ { id: 'zoom-in', value: 'zoom-in' }, { id: 'zoom-out', value: 'zoom-out' }, { id: 'redo', value: 'redo' }, { id: 'undo', value: 'undo' }, { id: 'edit', value: 'edit' }, { id: 'delete', value: 'delete' }, { id: 'auto-fit', value: 'auto-fit' }, { id: 'export', value: 'export' }, { id: 'reset', value: 'reset' }, ]; }, }, ], }); graph.render();
```

--------------------------------

### Graph Initialization with Container

Source: https://g6.antv.antgroup.com/en/manual/animation/custom-animation

Graph setup example using an explicit container reference.

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


const graph = new Graph({
  width: 50,
  height: 50,
  container,
  data: {
    nodes: [{ id: 'node-1', style: { x: 25, y: 25, size: 20 } }],
  },
  node: {
    animation: {
      update: [
        {
          fields: ['r'],
          shape: 'key',
        },
      ],
    },
  },
});


graph.draw().then(() => {
  graph.updateNodeData([{ id: 'node-1', style: { size: 40 } }]);
  graph.draw();
});
```

--------------------------------

### Implement Full Snapline Example

Source: https://g6.antv.antgroup.com/en/manual/plugin/snapline

A complete implementation showing data setup, graph initialization with grid layout, and specific snapline styling with auto-snap disabled.

```javascript

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


const data = {
  nodes: [{ id: 'node-0' }, { id: 'node-1' }, { id: 'node-2' }, { id: 'node-3' }, { id: 'node-4' }, { id: 'node-5' }],
  edges: [
    { source: 'node-0', target: 'node-1' },
    { source: 'node-0', target: 'node-2' },
    { source: 'node-0', target: 'node-3' },
    { source: 'node-0', target: 'node-4' },
    { source: 'node-1', target: 'node-0' },
    { source: 'node-2', target: 'node-0' },
    { source: 'node-3', target: 'node-0' },
    { source: 'node-4', target: 'node-0' },
    { source: 'node-5', target: 'node-0' },
  ],
};


const graph = new Graph({
  container: 'container',
  data,
  layout: { type: 'grid' },
  behaviors: ['drag-canvas', 'drag-element'],
  plugins: [
    {
      type: 'snapline',
      key: 'snapline',
      verticalLineStyle: { stroke: '#F08F56', lineWidth: 2 },
      horizontalLineStyle: { stroke: '#17C76F', lineWidth: 2 },
      autoSnap: false,
    },
  ],
});


graph.render();

```

--------------------------------

### Full Graph Implementation with Click-Select

Source: https://g6.antv.antgroup.com/en/manual/behavior/click-select

A complete example showing graph initialization, data setup, and the click-select behavior applied to a grid layout.

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


const graph = new Graph({
  container: 'container',
  width: 400,
  height: 200,
  layout: {
    type: 'grid',
  },
  data: {
    nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],
    edges: [
      { source: 'node1', target: 'node2' },
      { source: 'node2', target: 'node3' },
      { source: 'node3', target: 'node4' },
      { source: 'node4', target: 'node5' },
    ],
  },
  node: {
    style: {
      fill: '#E4504D',
    },
    state: {
      active: {
        fill: '#0f0',
      },
      neighborActive: {
        fill: '#FFC40C',
      },
    },
  },
  behaviors: [
    {
      type: 'click-select',
      degree: 1,
      state: 'active',
      neighborState: 'neighborActive',
      unselectedState: 'inactive',
    },
  ],
});


graph.render();
```

--------------------------------

### Start Development Server

Source: https://g6.antv.antgroup.com/en/manual/getting-started/step-by-step

Run the development server using npm.

```bash
npm run dev
```

--------------------------------

### Install ESBuild

Source: https://g6.antv.antgroup.com/en/manual/further-reading/bundle

Install the ESBuild package.

```bash
npm install esbuild --save-dev
```

--------------------------------

### Full Combo Implementation Example

Source: https://g6.antv.antgroup.com/en/manual/element/combo/base-combo

A complete example showing the initialization of a G6 graph with a combo and its associated style properties.

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


const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1', combo: 'combo1' }],
    combos: [{ id: 'combo1' }],
  },
  combo: {
    style: { fill: '#1783FF', stroke: '#000', lineWidth: 2 },
  },
});


graph.render();
```

```javascript
import { Graph } from '@antv/g6'; const graph = new Graph({ container: 'container', width: 240, height: 100, autoFit: 'center', data: { nodes: [{ id: 'node1', combo: 'combo1' }], combos: [{ id: 'combo1' }], }, combo: { style: { fill: '#1783FF', stroke: '#000', lineWidth: 2 }, }, }); graph.render();
```

--------------------------------

### Full Bubble Sets Implementation Example

Source: https://g6.antv.antgroup.com/en/manual/plugin/bubble-sets

A complete example demonstrating graph initialization with nodes, edges, and the Bubble Sets plugin configured with a specific key.

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


const graph = new Graph({
  container: 'container',
  width: 300,
  height: 150,
  autoFit: 'view',
  data: {
    nodes: [
      {
        id: 'node-0',
        data: { cluster: 'a' },
        style: { x: 555, y: 151 },
      },
      {
        id: 'node-1',
        data: { cluster: 'a' },
        style: { x: 532, y: 323 },
      },
      {
        id: 'node-2',
        data: { cluster: 'a' },
        style: { x: 473, y: 227 },
      },
      {
        id: 'node-3',
        data: { cluster: 'a' },
        style: { x: 349, y: 212 },
      },
      {
        id: 'node-4',
        data: { cluster: 'b' },
        style: { x: 234, y: 201 },
      },
      {
        id: 'node-5',
        data: { cluster: 'b' },
        style: { x: 338, y: 333 },
      },
      {
        id: 'node-6',
        data: { cluster: 'b' },
        style: { x: 365, y: 91 },
      },
    ],
    edges: [
      {
        id: 'edge-0',
        source: 'node-0',
        target: 'node-2',
      },
      {
        id: 'edge-1',
        source: 'node-1',
        target: 'node-2',
      },
      {
        id: 'edge-2',
        source: 'node-2',
        target: 'node-3',
      },
      {
        id: 'edge-3',
        source: 'node-3',
        target: 'node-4',
      },
      {
        id: 'edge-4',
        source: 'node-3',
        target: 'node-5',
      },
      {
        id: 'edge-5',
        source: 'node-3',
        target: 'node-6',
      },
    ],
  },
  behaviors: ['drag-canvas', 'zoom-canvas'],
  plugins: [
    {
      type: 'bubble-sets',
      key: 'bubble-sets-a',
      members: ['node-0', 'node-1', 'node-2'],
    },
  ],
});


graph.render();
```

```javascript
import { Graph } from '@antv/g6'; const graph = new Graph({ container: 'container', width: 300, height: 150, autoFit: 'view', data: { nodes: [ { id: 'node-0', data: { cluster: 'a' }, style: { x: 555, y: 151 }, }, { id: 'node-1', data: { cluster: 'a' }, style: { x: 532, y: 323 }, }, { id: 'node-2', data: { cluster: 'a' }, style: { x: 473, y: 227 }, }, { id: 'node-3', data: { cluster: 'a' }, style: { x: 349, y: 212 }, }, { id: 'node-4', data: { cluster: 'b' }, style: { x: 234, y: 201 }, }, { id: 'node-5', data: { cluster: 'b' }, style: { x: 338, y: 333 }, }, { id: 'node-6', data: { cluster: 'b' }, style: { x: 365, y: 91 }, }, ], edges: [ { id: 'edge-0', source: 'node-0', target: 'node-2', }, { id: 'edge-1', source: 'node-1', target: 'node-2', }, { id: 'edge-2', source: 'node-2', target: 'node-3', }, { id: 'edge-3', source: 'node-3', target: 'node-4', }, { id: 'edge-4', source: 'node-3', target: 'node-5', }, { id: 'edge-5', source: 'node-3', target: 'node-6', }, ], }, behaviors: ['drag-canvas', 'zoom-canvas'], plugins: [ { type: 'bubble-sets', key: 'bubble-sets-a', members: ['node-0', 'node-1', 'node-2'], }, ], }); graph.render();
```

--------------------------------

### Install GPU Layout Package

Source: https://g6.antv.antgroup.com/en/manual/layout/overview

Install the required dependency for GPU-accelerated layout algorithms.

```bash
npm install @antv/layout-gpu --save
```

--------------------------------

### Install WebGL Renderer

Source: https://g6.antv.antgroup.com/en/manual/further-reading/renderer

Install the required dependency for WebGL rendering.

```bash
npm install @antv/g-webgl
```

--------------------------------

### Graph.render() Usage Examples

Source: https://g6.antv.antgroup.com/en/api/render

Examples demonstrating basic rendering, rendering after data updates, and event listeners.

```javascript
// Basic usage
await graph.render();
```

```javascript
graph.addData({
  nodes: [{ id: 'node3' }, { id: 'node4' }],
  edges: [{ id: 'edge2', source: 'node1', target: 'node3' }],
});
await graph.render();
```

```javascript
import { GraphEvent } from '@antv/g6';


// Before rendering starts
graph.on(GraphEvent.BEFORE_RENDER, () => {
  console.log('Rendering starts...');
  // Show loading indicator
  showLoadingIndicator();
});


// After rendering completes
graph.on(GraphEvent.AFTER_RENDER, () => {
  console.log('Rendering complete');
  // Hide loading indicator
  hideLoadingIndicator();
});


graph.render();
```

--------------------------------

### Configure Start Script

Source: https://g6.antv.antgroup.com/en/manual/getting-started/step-by-step

Add the dev script to package.json to run Vite.

```json
{
  "scripts": {
    "dev": "vite"
  }
}
```

--------------------------------

### Basic edge creation setup

Source: https://g6.antv.antgroup.com/en/manual/behavior/create-edge

Initialize a graph with the default create-edge behavior enabled.

```javascript
const graph = new Graph({
  container: 'container',
  width: 800,
  height: 600,
  behaviors: ['create-edge'],
});
```

--------------------------------

### Full Custom Edge Implementation Example

Source: https://g6.antv.antgroup.com/en/manual/element/edge/custom-edge

A complete example demonstrating the definition, registration, and rendering of a custom straight-line edge.

```typescript
import { Graph, register, BaseEdge, ExtensionCategory } from '@antv/g6';


class MyLineEdge extends BaseEdge {
  getKeyStyle(attributes) {
    return { ...super.getKeyStyle(attributes), lineWidth: 2, stroke: '#A4D3EE' };
  }


  getKeyPath(attributes) {
    const { sourceNode, targetNode } = this;
    const [x1, y1] = sourceNode.getPosition();
    const [x2, y2] = targetNode.getPosition();


    return [
      ['M', x1, y1],
      ['L', x2, y2],
    ];
  }
}


register(ExtensionCategory.EDGE, 'my-line-edge', MyLineEdge);


const graph = new Graph({
  container: 'container',
  height: 200,
  data: {
    nodes: [
      { id: 'node1', style: { x: 100, y: 50 } },
      { id: 'node2', style: { x: 300, y: 120 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  node: {
    style: {
      fill: '#7FFFD4',
      stroke: '#5CACEE',
      lineWidth: 2,
    },
  },
  edge: {
    type: 'my-line-edge',
    style: {
      zIndex: 3,
    },
  },
});


graph.render();
```

--------------------------------

### Initialize Project Directory

Source: https://g6.antv.antgroup.com/en/manual/getting-started/step-by-step

Create a new directory for the tutorial project.

```bash
mkdir g6-tutorial


cd g6-tutorial
```

--------------------------------

### Start Development Environment

Source: https://g6.antv.antgroup.com/en/manual/contribute

Commands to enter the G6 package directory and launch the development server.

```bash
# Enter the g6 code directory.
cd ./packages/g6


# Start the development environment
pnpm dev
```

--------------------------------

### Full Practical Example

Source: https://g6.antv.antgroup.com/en/manual/behavior/drag-canvas

A complete implementation showing graph initialization with data, layout, and drag-canvas behavior.

```javascript

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


const graph = new Graph({
  container: 'container',
  layout: {
    type: 'grid',
  },
  data: {
    nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],
    edges: [
      { source: 'node1', target: 'node2' },
      { source: 'node1', target: 'node3' },
      { source: 'node1', target: 'node4' },
      { source: 'node2', target: 'node3' },
      { source: 'node3', target: 'node4' },
      { source: 'node4', target: 'node5' },
    ],
  },
  behaviors: ['drag-canvas'],
});


graph.render();

```

--------------------------------

### Lasso Select Playground Configuration

Source: https://g6.antv.antgroup.com/en/manual/behavior/lasso-select

A comprehensive example demonstrating the setup of a graph with lasso-select, including GUI controls for dynamic behavior updates.

```javascript
createGraph(
  {
    data: {
      nodes: [
        { id: 'node-1', style: { x: 200, y: 100 } },
        { id: 'node-2', style: { x: 360, y: 100 } },
        { id: 'node-3', style: { x: 280, y: 220 } },
      ],
      edges: [
        { source: 'node-1', target: 'node-2' },
        { source: 'node-1', target: 'node-3' },
        { source: 'node-2', target: 'node-3' },
      ],
    },
    node: {
      style: { fill: '#7e3feb' },
      state: {
        custom: { fill: '#ffa940' },
      },
    },
    edge: {
      stroke: '#8b9baf',
      state: {
        custom: { stroke: '#ffa940' },
      },
    },
    behaviors: [
      {
        type: 'lasso-select',
        key: 'lasso-select',
        trigger: [],
        immediately: true,
      },
    ],
    plugins: [{ type: 'grid-line', size: 30 }],
    animation: true,
  },
  { width: 600, height: 300 },
  (gui, graph) => {
    const options = {
      key: 'lasso-select',
      type: 'lasso-select',
      animation: false,
      enable: true,
      enableElements: ['node', 'edge', 'combo'],
      mode: 'default',
      state: 'selected',
    };
    const optionFolder = gui.addFolder('lassoSelect Options');
    optionFolder.add(options, 'type').disable(true);


    optionFolder.add(options, 'state', ['active', 'selected', 'custom']);
    optionFolder.add(options, 'mode', ['union', 'intersect', 'diff', 'default']);
    // .onChange((e) => {
    //   immediately.show(e === 'default');
    // });


    optionFolder.onChange(({ property, value }) => {
      graph.updateBehavior({
        key: 'lasso-select',
        [property]: value,
      });
      graph.render();
    });
  },
);
```

--------------------------------

### Full Practical Implementation

Source: https://g6.antv.antgroup.com/en/manual/behavior/scroll-canvas

A complete example showing graph initialization with data, layout, and scroll-canvas behavior.

```javascript

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


const graph = new Graph({
  container: 'container',
  layout: {
    type: 'grid',
  },
  data: {
    nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],
    edges: [
      { source: 'node1', target: 'node2' },
      { source: 'node1', target: 'node3' },
      { source: 'node1', target: 'node4' },
      { source: 'node2', target: 'node3' },
      { source: 'node3', target: 'node4' },
      { source: 'node4', target: 'node5' },
    ],
  },
  behaviors: ['scroll-canvas'],
});


graph.render();

```

--------------------------------

### Install Vite

Source: https://g6.antv.antgroup.com/en/manual/getting-started/step-by-step

Install Vite as a development dependency.

```bash
npm install vite --save-dev
```

--------------------------------

### Install G6 Dependency

Source: https://g6.antv.antgroup.com/en/manual/getting-started/step-by-step

Install the G6 library as a project dependency.

```bash
npm install @antv/g6 --save
```

--------------------------------

### Create a full G6 graph in HTML

Source: https://g6.antv.antgroup.com/en/manual/getting-started/quick-start

A complete example demonstrating how to set up a container, import the G6 library, fetch data, and render a graph.

```html

<!-- Prepare a container -->
<div id="container" style="width: 500px; height: 500px"></div>


<!-- Import G6's JS file -->
<script src="https://unpkg.com/@antv/g6@5/dist/g6.min.js"></script>


<script>
  const { Graph } = G6;


  fetch('https://assets.antv.antgroup.com/g6/graph.json')
    .then((res) => res.json())
    .then((data) => {
      const graph = new Graph({
        container: 'container',
        autoFit: 'view',
        data,
        node: {
          style: {
            size: 10,
          },
          palette: {
            field: 'group',
            color: 'tableau',
          },
        },
        layout: {
          type: 'd3-force',
          manyBody: {},
          x: {},
          y: {},
        },
        behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
      });


      graph.render();
    });
</script>

```

--------------------------------

### Install SVG Renderer

Source: https://g6.antv.antgroup.com/en/manual/further-reading/renderer

Install the required dependency for SVG rendering.

```bash
npm install @antv/g-svg
```

--------------------------------

### Initialize Graph with ComboCombined layout

Source: https://g6.antv.antgroup.com/en/manual/layout/combo-combined-layout

Full example demonstrating graph initialization with data fetching, layout configuration, and styling for nodes and edges.

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


fetch('https://assets.antv.antgroup.com/g6/combo.json')
  .then((res) => res.json())
  .then((data) => {
    const graph = new Graph({
      container: 'container',
      data,
      layout: {
        type: 'combo-combined',
        comboPadding: 2,
      },
      node: {
        style: {
          size: 20,
          labelText: (d) => d.id,
        },
        palette: {
          type: 'group',
          field: (d) => d.combo,
        },
      },
      edge: {
        style: (model) => {
          const { size, color } = model.data;
          return {
            stroke: color || '#99ADD1',
            lineWidth: size || 1,
          };
        },
      },
      behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],
      autoFit: 'view',
    });


    graph.render();
  });
```

--------------------------------

### Static Collapse-Expand Configuration

Source: https://g6.antv.antgroup.com/en/manual/behavior/collapse-expand

Use a string declaration for quick setup with default parameters. This method does not support dynamic updates.

```javascript
const graph = new Graph({
  // other configurations...
  behaviors: ['collapse-expand'],
});
```

--------------------------------

### Install Rollup dependencies

Source: https://g6.antv.antgroup.com/en/manual/further-reading/bundle

Install Rollup and required plugins for module resolution.

```bash
npm install rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve --save-dev
```

--------------------------------

### Initialize Graph with Timebar

Source: https://g6.antv.antgroup.com/en/manual/plugin/timebar

Full example demonstrating graph initialization with a timebar plugin and dynamic CSS injection.

```javascript
createGraph(
  {
    data: () => {
      return {
        nodes: [
          {
            id: 'node1',
            style: { x: 100, y: 100, label: 'Node 1' },
            data: {
              timestamp: new Date('2023-08-01').getTime(),
            },
          },
          {
            id: 'node2',
            style: { x: 200, y: 100, label: 'Node 2' },
            data: {
              timestamp: new Date('2023-08-01').getTime() + 3600 * 24 * 1000,
            },
          },
          {
            id: 'node3',
            style: { x: 150, y: 200, label: 'Node 3' },
            data: {
              timestamp: new Date('2023-08-01').getTime() + 3600 * 24 * 1000 * 2,
            },
          },
        ],
        edges: [
          { id: 'edge1', source: 'node1', target: 'node2' },
          { id: 'edge2', source: 'node2', target: 'node3' },
          { id: 'edge3', source: 'node3', target: 'node1' },
        ],
      };
    },
    node: {
      style: {
        size: 20,
        label: true,
      },
    },
    edge: {
      style: {
        stroke: '#91d5ff',
        lineWidth: 1,
      },
    },
    plugins: [
      {
        type: 'timebar',
        className: 'custom-timebar',
        width: 400,
        height: 80,
        padding: [20, 20, 10, 20],
        position: 'bottom',
        data: [
          {
            time: new Date('2023-08-01').getTime(),
            value: 5,
          },
          {
            time: new Date('2023-08-01').getTime() + 3600 * 24 * 1000,
            value: 10,
          },
          {
            time: new Date('2023-08-01').getTime() + 3600 * 24 * 1000 * 2,
            value: 15,
          },
        ],
        labelFormatter: (time) => {
          return new Date(time).toLocaleDateString();
        },
      },
    ],
  },
  { width: 600, height: 400 },
  (gui, graph) => {
    gui?.hide();
    const style = document.createElement('style');
    style.innerHTML = `
      .custom-timebar {
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
    `;
    document.head.appendChild(style);
  },
);
```

--------------------------------

### Install Webpack dependencies

Source: https://g6.antv.antgroup.com/en/manual/further-reading/bundle

Install the required Webpack CLI tools for the project.

```bash
npm install webpack webpack-cli --save-dev
```

--------------------------------

### Install 3D extension

Source: https://g6.antv.antgroup.com/en/manual/further-reading/3d

Install the required 3D extension package for G6.

```bash
npm install @antv/g6-extension-3d --save
```

--------------------------------

### Install WASM Layout Package

Source: https://g6.antv.antgroup.com/en/manual/layout/overview

Install the required dependency for WASM-accelerated layout algorithms.

```bash
npm install @antv/layout-wasm --save
```

--------------------------------

### Install Webpack 4 dependencies

Source: https://g6.antv.antgroup.com/en/manual/further-reading/bundle

Install necessary loaders for Webpack 4 compatibility.

```bash
npm install babel-loader@8 @babel/preset-env @open-wc/webpack-import-meta-loader --save-dev
```

--------------------------------

### Practical Graph Implementation

Source: https://g6.antv.antgroup.com/en/manual/behavior/hover-activate

A complete example fetching remote data and initializing a graph with hover-activate behavior.

```javascript

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


const format = (data) => {
  const { nodes, edges } = data;
  return {
    nodes: nodes.map(({ id, ...node }) => ({ id, data: node })),
    edges: edges.map(({ id, source, target, ...edge }) => ({ id, source, target, data: edge })),
  };
};


fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/xiaomi.json')
  .then((res) => res.json())
  .then((data) => {
    const graph = new Graph({
      container: 'container',
      autoFit: 'view',
      data: format(data),
      behaviors: ['hover-activate'],
      layout: {
        type: 'force',
        preventOverlap: true,
        nodeSize: 24,
      },
      animation: false,
    });


    graph.render();
  });

```

--------------------------------

### Initialize Graph with Node States

Source: https://g6.antv.antgroup.com/en/manual/element/node/base-node

Full example demonstrating graph initialization with nodes set to a specific state.

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


const graph = new Graph({
  container: 'container',
  width: 200,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1', states: ['focus'] }],
  },
  node: {
    state: {
      focus: {
        lineWidth: 3,
        stroke: 'orange',
      },
    },
  },
});


graph.render();
```

```javascript
import { Graph } from '@antv/g6'; const graph = new Graph({ container: 'container', width: 200, height: 100, autoFit: 'center', data: { nodes: [{ id: 'node1', states: ['focus'] }], }, node: { state: { focus: { lineWidth: 3, stroke: 'orange', }, }, }, }); graph.render();
```

--------------------------------

### Commit Message Examples

Source: https://g6.antv.antgroup.com/en/manual/contribute

Examples demonstrating the correct application of the Conventional Commits specification.

```text

feat: add new feature
refactor(behavior): refactor drag-canvas behavior

```

--------------------------------

### Initialize NPM Project

Source: https://g6.antv.antgroup.com/en/manual/getting-started/step-by-step

Initialize a new npm project in the current directory.

```bash
npm init -y
```

--------------------------------

### Install g6-extension-vue dependencies

Source: https://g6.antv.antgroup.com/en/manual/element/node/vue-node

Command to install the necessary extension library for Vue node support.

```bash
npm install g6-extension-vue
```

--------------------------------

### Animation Parameter Examples

Source: https://g6.antv.antgroup.com/en/manual/animation/custom-animation

Examples of animation frame parameters for node size and circle radius.

```json
[{ "size": 20 }, { "size": 40 }]
```

```json
[{ "r": 10 }, { "r": 20 }]
```

--------------------------------

### Install React Extension Dependencies

Source: https://g6.antv.antgroup.com/en/manual/element/node/react-node

Command to install the necessary extension package for React node support.

```bash
npm install @antv/g6-extension-react
```

--------------------------------

### Configure Click Select Behavior

Source: https://g6.antv.antgroup.com/en/manual/behavior/click-select

This example demonstrates how to initialize a graph with the click-select behavior and provides a GUI to dynamically update its configuration options.

```javascript
createGraph(
  {
    data: {
      nodes: [
        { id: 'node-1', style: { x: 280, y: 60, fill: '#E4504D', labelText: 'degree: 0' } },
        { id: 'node-2-1', style: { x: 330, y: 140, fill: '#FFC40C', labelText: 'degree: 1' } },
        { id: 'node-2-2', style: { x: 230, y: 140, fill: '#FFC40C', labelText: 'degree: 1' } },
        { id: 'node-3-1', style: { x: 380, y: 220, fill: '#0f0', labelText: 'degree: 2' } },
        { id: 'node-3-2', style: { x: 180, y: 220, fill: '#0f0', labelText: 'degree: 2' } },


        {
          id: 'degree引导',
          style: {
            x: 525,
            y: 110,
            fill: null,
            labelText: '这里可以修改degree ->',
            labelFontWeight: 700,
            labelFontSize: 10,
          },
        },
      ],
      edges: [
        { source: 'node-1', target: 'node-2-1' },
        { source: 'node-1', target: 'node-2-2' },
        { source: 'node-2-1', target: 'node-3-1' },
        { source: 'node-2-2', target: 'node-3-2' },
      ],
    },
    node: {
      style: { label: true, labelFill: '#666', labelFontSize: 14, labelPlacement: 'bottom' },
      state: {
        custom: { fill: '#ffa940' },
      },
    },
    edge: {
      stroke: '#8b9baf',
      state: {
        custom: { stroke: '#ffa940' },
      },
    },
    behaviors: [
      {
        type: 'click-select',
        key: 'click-select',
      },
    ],
    plugins: [{ type: 'grid-line', size: 30 }],
    animation: true,
  },
  { width: 600, height: 300 },
  (gui, graph) => {
    const options = {
      key: 'click-select',
      type: 'click-select',
      animation: true,
      enable: true,
      multiple: false,
      trigger: 'shift+click',
      state: 'selected',
      unselectedState: undefined,
      degree: 0,
    };
    const optionFolder = gui.addFolder('Click Select Options');
    optionFolder.add(options, 'type').disable(true);
    optionFolder.add(options, 'animation');
    optionFolder.add(options, 'enable');
    optionFolder.add(options, 'degree', 0, 2, 1);
    optionFolder.add(options, 'state', ['active', 'selected', 'custom']);
    optionFolder.add(options, 'unselectedState', [undefined, 'inactive']);
    const trigger = optionFolder
      .add(options, 'trigger', {
        'shift+click': ['shift'],
        'meta+click': ['Meta'],
      })
      .hide();
    optionFolder.add(options, 'multiple').onChange((v) => trigger.show(v));


    optionFolder.onChange(({ property, value }) => {
      graph.updateBehavior({
        key: 'click-select',
        [property]: value,
      });
      graph.render();
    });
  },
);
```

```javascript
createGraph( { data: { nodes: [ { id: 'node-1', style: { x: 280, y: 60, fill: '#E4504D', labelText: 'degree: 0' } }, { id: 'node-2-1', style: { x: 330, y: 140, fill: '#FFC40C', labelText: 'degree: 1' } }, { id: 'node-2-2', style: { x: 230, y: 140, fill: '#FFC40C', labelText: 'degree: 1' } }, { id: 'node-3-1', style: { x: 380, y: 220, fill: '#0f0', labelText: 'degree: 2' } }, { id: 'node-3-2', style: { x: 180, y: 220, fill: '#0f0', labelText: 'degree: 2' } }, { id: 'degree引导', style: { x: 525, y: 110, fill: null, labelText: '这里可以修改degree ->', labelFontWeight: 700, labelFontSize: 10, }, }, ], edges: [ { source: 'node-1', target: 'node-2-1' }, { source: 'node-1', target: 'node-2-2' }, { source: 'node-2-1', target: 'node-3-1' }, { source: 'node-2-2', target: 'node-3-2' }, ], }, node: { style: { label: true, labelFill: '#666', labelFontSize: 14, labelPlacement: 'bottom' }, state: { custom: { fill: '#ffa940' }, }, }, edge: { stroke: '#8b9baf', state: { custom: { stroke: '#ffa940' }, }, }, behaviors: [ { type: 'click-select', key: 'click-select', }, ], plugins: [{ type: 'grid-line', size: 30 }], animation: true, }, { width: 600, height: 300 }, (gui, graph) => { const options = { key: 'click-select', type: 'click-select', animation: true, enable: true, multiple: false, trigger: 'shift+click', state: 'selected', unselectedState: undefined, degree: 0, }; const optionFolder = gui.addFolder('Click Select Options'); optionFolder.add(options, 'type').disable(true); optionFolder.add(options, 'animation'); optionFolder.add(options, 'enable'); optionFolder.add(options, 'degree', 0, 2, 1); optionFolder.add(options, 'state', ['active', 'selected', 'custom']); optionFolder.add(options, 'unselectedState', [undefined, 'inactive']); const trigger = optionFolder .add(options, 'trigger', { 'shift+click': ['shift'], 'meta+click': ['Meta'], }) .hide(); optionFolder.add(options, 'multiple').onChange((v) => trigger.show(v)); optionFolder.onChange(({ property, value }) => { graph.updateBehavior({ key: 'click-select', [property]: value, }); graph.render(); }); }, );
```

--------------------------------

### Combo Data Example

Source: https://g6.antv.antgroup.com/en/manual/data

Example of a combo object used for grouping nodes, including collapsed state.

```json
{
  "id": "combo1",
  "type": "circle",
  "data": { "groupName": "Group A" },
  "style": { "fill": "lightblue", "stroke": "blue", "collapsed": true },
  "states": [],
  "combo": null
}
```

--------------------------------

### Node Data Example

Source: https://g6.antv.antgroup.com/en/manual/data

Example of a node object including custom data, style properties, and state.

```json
{
  "id": "node-1",
  "type": "circle",
  "data": { "name": "alice", "role": "Admin" },
  "style": { "x": 100, "y": 200, "size": 32, "fill": "violet" },
  "states": ["selected"],
  "combo": null
}
```

--------------------------------

### Initialize Graph with Hull Plugin

Source: https://g6.antv.antgroup.com/en/manual/plugin/hull

A complete example showing the initialization of a G6 Graph instance with the hull plugin and sample data.

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


const graph = new Graph({
  container: 'container',
  width: 300,
  height: 150,
  autoFit: 'view',
  data: {
    nodes: [
      {
        id: 'node-0',
        data: { cluster: 'a' },
        style: { x: 555, y: 151 },
      },
      {
        id: 'node-1',
        data: { cluster: 'a' },
        style: { x: 532, y: 323 },
      },
      {
        id: 'node-2',
        data: { cluster: 'a' },
        style: { x: 473, y: 227 },
      },
      {
        id: 'node-3',
        data: { cluster: 'a' },
        style: { x: 349, y: 212 },
      },
      {
        id: 'node-4',
        data: { cluster: 'b' },
        style: { x: 234, y: 201 },
      },
      {
        id: 'node-5',
        data: { cluster: 'b' },
        style: { x: 338, y: 333 },
      },
      {
        id: 'node-6',
        data: { cluster: 'b' },
        style: { x: 365, y: 91 },
      },
    ],
    edges: [
      {
        source: 'node-0',
        target: 'node-2',
      },
      {
        source: 'node-1',
        target: 'node-2',
      },
      {
        source: 'node-2',
        target: 'node-3',
      },
      {
        source: 'node-3',
        target: 'node-4',
      },
      {
        source: 'node-3',
        target: 'node-5',
      },
      {
        source: 'node-3',
        target: 'node-6',
      },
    ],
  },
  plugins: [
    {
      type: 'hull',
      members: ['node-1', 'node-2'], // List of node IDs to be wrapped
    },
  ],
  behaviors: ['zoom-canvas', 'drag-canvas'],
});


graph.render();
```

```javascript
import { Graph } from '@antv/g6'; const graph = new Graph({ container: 'container', width: 300, height: 150, autoFit: 'view', data: { nodes: [ { id: 'node-0', data: { cluster: 'a' }, style: { x: 555, y: 151 }, }, { id: 'node-1', data: { cluster: 'a' }, style: { x: 532, y: 323 }, }, { id: 'node-2', data: { cluster: 'a' }, style: { x: 473, y: 227 }, }, { id: 'node-3', data: { cluster: 'a' }, style: { x: 349, y: 212 }, }, { id: 'node-4', data: { cluster: 'b' }, style: { x: 234, y: 201 }, }, { id: 'node-5', data: { cluster: 'b' }, style: { x: 338, y: 333 }, }, { id: 'node-6', data: { cluster: 'b' }, style: { x: 365, y: 91 }, }, ], edges: [ { source: 'node-0', target: 'node-2', }, { source: 'node-1', target: 'node-2', }, { source: 'node-2', target: 'node-3', }, { source: 'node-3', target: 'node-4', }, { source: 'node-3', target: 'node-5', }, { source: 'node-3', target: 'node-6', }, ], }, plugins: [ { type: 'hull', members: ['node-1', 'node-2'], // List of node IDs to be wrapped }, ], behaviors: ['zoom-canvas', 'drag-canvas'], }); graph.render();
```
Tokens:
Raw