Overview of Drawing and Rendering

G6 provides a series of drawing and rendering-related APIs to control the display process of graphical elements. In G6, drawing and rendering are two different concepts:

• Drawing (draw): Responsible only for drawing graphical elements onto the canvas, without involving layout calculations.
• Rendering (render): A complete rendering process, including data processing, layout calculations, and final drawing.

Understanding the differences between these APIs is crucial for optimizing performance and achieving specific effects.

API Reference

Graph.draw()

Draw elements without performing layout calculations.

draw(): Promise<void>;

Note

The draw method only executes the drawing process of elements and does not recalculate the layout.

⚠️ Attention: draw is an asynchronous method, requiring the use of await or Promise chaining to ensure subsequent operations are executed after drawing is complete.

Example 1: Basic Usage

// Basic usage
await graph.draw();

Example 2: Redraw after modifying node styles

// Redraw after modifying node styles
graph.updateNodeData([
  {
    id: 'node1',
    style: {
      fill: 'red',
      stroke: 'blue',
      lineWidth: 2,
    },
  },
]);

// Only draw the updated styles without re-layout
await graph.draw();

Example 3: Batch update multiple elements and draw once

// Update multiple nodes
graph.updateNodeData([{ id: 'node1', style: { fill: 'red' } }]);
graph.updateNodeData([{ id: 'node2', style: { fill: 'blue' } }]);

// Update edges
graph.updateEdgeData([{ id: 'edge1', style: { stroke: 'green' } }]);

// Draw after batch operations
await graph.draw();

Example 4: Use event listener to detect drawing completion

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

graph.on(GraphEvent.AFTER_DRAW, () => {
  console.log('Drawing complete');
});

await graph.draw();

Graph.render()

Execute the complete rendering process, including data processing, layout calculations, and drawing.

render(): Promise<void>;

Note

The render method executes the complete rendering process:

1. Process data updates
2. Draw elements onto the canvas
3. Execute layout algorithms

Example 1: Basic Usage

// Basic usage
await graph.render();

Example 2: Render after adding new data

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

Example 3: Listen to rendering events

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

Graph.clear()

Clear all elements on the canvas, including nodes, edges, and other graphical elements.

clear(): Promise<void>;

Note

This method deletes all elements in the graph but retains the canvas configuration and styles. It is an asynchronous method that returns a Promise.

Example

// Basic usage
await graph.clear();

Usage Tips

Choosing between draw and render

• Use draw() when:
  • Only the styles or states of elements are modified, without needing to recalculate positions.
  • Performance-sensitive, aiming to avoid unnecessary layout calculations.
• Use render() when:
  • Initializing the graph.
  • Changing layout configurations.
  • Adding or removing a large number of nodes/edges.
  • Need to recalculate positions of all elements.