or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

behaviors.mddata-management.mdelements.mdevents.mdgraph-runtime.mdindex.mdlayouts.mdplugins.mdtypes.md
tile.json

tessl/npm-antv--g6

A comprehensive graph visualization framework providing rich UI elements, layouts, behaviors, and interactions for building interactive graph applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@antv/g6@5.0.x

To install, run

npx @tessl/cli install tessl/npm-antv--g6@5.0.0

index.mddocs/

G6 Graph Visualization Framework

G6 is a comprehensive graph visualization framework built in TypeScript that provides rich APIs for creating, managing, and interacting with graph visualizations. It includes nodes, edges, combos, layouts, behaviors, plugins, and data transforms to build complex graph applications.

Package Information

  • Package Name: @antv/g6
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @antv/g6

Core Imports

// Main Graph class and Canvas
import { Graph, Canvas } from '@antv/g6';

// Core element types
import { 
  // Node types
  Circle, Diamond, Rect, Image, Donut, Ellipse, HTML, 
  Hexagon, Star, Triangle,
  // Edge types  
  Line, Cubic, CubicHorizontal, CubicVertical, CubicRadial,
  Polyline, Quadratic,
  // Combo types
  CircleCombo, RectCombo 
} from '@antv/g6';

// Layout algorithms
import { 
  ForceLayout, 
  GridLayout, 
  CircularLayout,
  DagreLayout,
  CompactBoxLayout,
  D3ForceLayout,
  FruchtermanLayout,
  RadialLayout,
  ConcentricLayout,
  RandomLayout,
  AntVDagreLayout,
  DendrogramLayout,
  IndentedLayout,
  MindmapLayout,
  FishboneLayout,
  ForceAtlas2Layout,
  MDSLayout,
  SnakeLayout
} from '@antv/g6';

// Behaviors and plugins
import { 
  // Behaviors
  DragCanvas, 
  ZoomCanvas, 
  DragElement,
  DragElementForce,
  BrushSelect,
  ClickSelect,
  LassoSelect,
  HoverActivate,
  AutoAdaptLabel,
  CollapseExpand,
  CreateEdge,
  FixElementSize,
  FocusElement,
  OptimizeViewportTransform,
  ScrollCanvas,
  // Plugins
  Minimap,
  Tooltip,
  Toolbar,
  Background,
  Contextmenu,
  History,
  Fullscreen,
  GridLine,
  Legend,
  Watermark,
  BubbleSets,
  CameraSetting,
  EdgeBundling,
  EdgeFilterLens,
  Fisheye,
  Hull,
  Snapline,
  Timebar
} from '@antv/g6';

// Utility functions and registry
import { 
  register, 
  getExtension,
  getExtensions,
  treeToGraphData,
  parseSize,
  idOf,
  positionOf,
  isCollapsed,
  omitStyleProps,
  subStyleProps,
  setVisibility,
  invokeLayoutMethod,
  Shortcut
} from '@antv/g6';

// Transform functions
import {
  BaseTransform,
  MapNodeSize,
  PlaceRadialLabels,
  ProcessParallelEdges
} from '@antv/g6';

// Effect system
import { effect } from '@antv/g6';

// Shape components
import {
  Badge,
  BaseShape,
  Icon,
  Label
} from '@antv/g6';

// Constants and utilities
import { version, iconfont } from '@antv/g6';

For CommonJS:

const { 
  Graph, 
  Canvas,
  Circle, 
  Line, 
  ForceLayout,
  DragCanvas,
  Minimap 
} = require('@antv/g6');

Basic Usage

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

// Create a basic graph
const graph = new Graph({
  container: 'container', // DOM element ID
  width: 800,
  height: 600,
  data: {
    nodes: [
      { id: 'node1', style: { x: 100, y: 100 } },
      { id: 'node2', style: { x: 300, y: 200 } }
    ],
    edges: [
      { source: 'node1', target: 'node2' }
    ]
  },
  node: {
    type: 'circle',
    style: {
      size: 20,
      fill: '#1783FF',
      stroke: '#fff',
      lineWidth: 2
    }
  },
  edge: {
    type: 'line',
    style: {
      stroke: '#e2e2e2',
      lineWidth: 1
    }
  },
  layout: {
    type: 'force',
    preventOverlap: true
  },
  behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
  plugins: [
    {
      key: 'minimap',
      type: 'minimap',
      size: [200, 120]
    }
  ]
});

// Render the graph
graph.render().then(() => {
  console.log('Graph rendered successfully');
});

Architecture

G6 follows a modular architecture with several key components:

Core Runtime

  • Graph: Main controller class managing the entire visualization
  • Canvas: Multi-layer rendering system with background, main, label, and transient layers
  • Element System: Node, Edge, and Combo elements with customizable styles and behaviors

Extension System

  • Layouts: Algorithms for positioning graph elements automatically
  • Behaviors: Interactive behaviors for user input handling
  • Plugins: UI components and visual enhancements
  • Transforms: Data processing and manipulation utilities

Type System

G6 provides comprehensive TypeScript definitions for:

  • Configuration options and style properties
  • Event system with typed event handlers
  • Data structures for nodes, edges, and combos
  • Extension interfaces for custom implementations

Capabilities

Graph Runtime and Canvas Management

Comprehensive graph lifecycle management with multi-layer rendering system.

// Canvas and viewport operations
const zoom = graph.getZoom();
await graph.zoomTo(1.5);
await graph.fitView();
await graph.translateTo([100, 100]);

// Canvas layer access
const canvas = graph.getCanvas();
const mainLayer = canvas.getLayer('main');
const labelLayer = canvas.getLayer('label');

→ Learn more about Graph Runtime

Element System

Rich element types with customizable styles, states, and sub-components.

// Dynamic element manipulation  
await graph.updateNodeData([
  { id: 'node1', style: { fill: 'red', size: 30 } }
]);

await graph.setElementState('node1', 'selected');
await graph.translateElementTo('node1', [200, 200]);

→ Learn more about Elements

Interactive Behaviors

Built-in behaviors for common graph interactions with extensive customization options.

// Behavior configuration
graph.setBehaviors([
  'drag-canvas',
  'zoom-canvas', 
  {
    key: 'drag-element',
    type: 'drag-element',
    enable: (event) => event.targetType === 'node'
  }
]);

→ Learn more about Behaviors

Plugin System

Extensible plugin architecture for UI components and visual enhancements.

// Plugin management
graph.setPlugins([
  { key: 'minimap', type: 'minimap', size: [200, 120] },
  { key: 'tooltip', type: 'tooltip' },
  { key: 'toolbar', type: 'toolbar' }
]);

const minimap = graph.getPluginInstance('minimap');

→ Learn more about Plugins

Layout Algorithms

Comprehensive collection of layout algorithms for automatic graph positioning.

// Layout execution
await graph.setLayout({
  type: 'force',
  preventOverlap: true,
  nodeStrength: -300,
  edgeStrength: 0.6
});

await graph.layout(); // Execute layout

→ Learn more about Layouts

Data Management

Powerful data manipulation APIs with incremental updates and relationship queries.

// Data operations
const nodeData = graph.getNodeData('node1');
const neighbors = graph.getNeighborNodesData('node1');
const relatedEdges = graph.getRelatedEdgesData('node1');

await graph.addNodeData([
  { id: 'newNode', style: { x: 400, y: 300 } }
]);

→ Learn more about Data Management

Event System

Comprehensive event system with typed event handlers and lifecycle events.

// Event handling
graph.on('node:click', (event) => {
  console.log('Node clicked:', event.target.id);
});

graph.on('viewport:transform', (event) => {
  console.log('Viewport changed:', event.transform);
});

→ Learn more about Events

Extension Registry and Utilities

Comprehensive utilities for extension management, data processing, and element manipulation.

// Extension registration and management
import { register, getExtension, getExtensions } from '@antv/g6';

// Register custom extensions
register('behavior', 'custom-drag', CustomDragBehavior);
register('node', 'custom-node', CustomNode);

// Get registered extensions
const dragBehavior = getExtension('behavior', 'drag-canvas');
const allNodes = getExtensions('node');

// Utility functions
import { 
  treeToGraphData,    // Convert tree data to graph format
  parseSize,          // Parse size values with units
  idOf,               // Extract ID from element data
  positionOf,         // Extract position from element data
  isCollapsed         // Check if element is collapsed
} from '@antv/g6';

// Data transformation
const graphData = treeToGraphData(treeData);
const size = parseSize('20px');
const id = idOf(nodeData);
const position = positionOf(nodeData);
const collapsed = isCollapsed(nodeData);

Type System

Complete TypeScript definitions for type-safe development.

import type { 
  GraphOptions,
  NodeData, 
  EdgeData,
  LayoutOptions,
  BehaviorOptions 
} from '@antv/g6';

→ Learn more about Types