logoCreated with Sketch.

G6

Graph

5 min read

What is Graph

"Graph" means graphics, images, figures in the traditional cognitive. The "Graph" in graph theory and visuzliation has specific definition: it is make up of objects and their relationships. It might not a visual graph, but a relational data.

Graph is the carrier of G6. All the operations about events, behaviors, items are mounted on the instance of Graph.

The life cycle of an instance of Graph is:

Initialize -> Load data -> Render -> Update -> Destroy.

In Getting Started, we introduce the process of initialization, data loading, graph rendering. In this document, we will introduce the initialization/instantiating process in detail.

Prerequisite Code

The code for interpretation of this chapter will base on the following JavaScript code embedded in HTML. By defining the data, instantiating the graph, loading the data, and rendering the graph, the code below results in the graph in the figure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tutorial Demo</title>
</head>
  <body>
    /* The container of the graph */
    <div id="mountNode"></div>
    /* Import G6 */
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js"></script>
    <script>
      // Define the source data
      const data = {
        // The array of nodes
        nodes: [{
          id: 'node1',
          x: 100,
          y: 200
        },{
          id: 'node2',
          x: 300,
          y: 200
        }],
        // The array of edges
        edges: [
          // It is an edge link node1 to node2
          {
            source: 'node1',
            target: 'node2'
          }
        ]
      };
      
      // Create an instance of G6.Graph
      const graph = new G6.Graph({
        container: 'mountNode', // Assign the id of the graph container
        // The width and the height of the graph
        width: 800,
        height: 500
      });
      // Load data
      graph.data(data);
      // Render the graph
      graph.render();
    </script>
  </body>
</html>

Initialize/Instantiate a Graph

Instantiate a Graph by new G6.Graph(config), where the parameter config is an object of graph configurations. Most global configurations are assigned here. As shown in Prerequisite Code, we instantiate a Graph:

const graph = new G6.Graph({
  container: 'mountNode', // Assign the id of the graph container
  // The width and the height of the graph
  width: 800,
  height: 500,
});

Required Configuration

There are three required configurations when instantiating a Graph:

  • container

     Type: String | Object. The DOM container of the graph. It can be a string for the id of the DOM container, or an object for the DOM object.

  • width and height

     Type: Number. THe width and the height of the graph.

Commonly used Configuration

There are some commonly used configurations. For complete configurations, please refer to Graph API.

Rendering

  • renderer

      Type: String; Options: 'svg' | 'canvas'; Default: 'canvas'. Render by SVG or Canvas.

  • fitView

      Type: Boolean; Default: 'false'. Whether to fit the canvas to the view port automatically.

  • fitViewPadding

      Type: Number | Array; Default: 0. It is the padding between canvas and the border of view port. Takes effect only when fitView: true.

Global Item Configuration

  • defaultNode

      Type: Object. The global configuration for all the nodes in the graph in default state. It includes the style properties and other properties of nodes. Refer to Built-in Nodes.

  • defaultEdge

      Type: Object. The global configuration for all the edges in the graph in default state. It includes the style properties and other properties of edges. Refer to Built-in Edges.

  • nodeStateStyles

      Type: Object. The style properties of nodes in different states expect for default state. Refer to State.

  • edgeStateStyles

      Type: Object. The style properties of edges in different states expect for default state. Refer to State.

Layout

  • layout

      Type: Object. If there is no position information in data, Random Layout will take effect by default. The layout options and their configurations can be found in Layout，Layout API.

Interaction

  • modes

      Type: Array. It is the set of interactions modes. One mode is made up of one or more interaction events. Refer to Mode.

Animation

  • animate

      Type: Boolean; Default: 'false'. Whether to activate the global animation. If it is true, the positions of nodes will be changed animatively when the layout is changed.

  • animateCfg

      Type: Object. The configurations for global animation, includes easing functions, duration, and so on. Refer to Animation.

Plugin

  • plugins

      Type: Array. The plugins to assist the anaysis. Refer to Plugins and Tools.

Commonly Used Functions

There are two required functions in the code of Prerequisite Code:

// Load the data
graph.data(data);
// Render the graph
graph.render();
  • data(data): Load the source data to the instance graph.
  • render(): render the graph.

For complete functions for Graph, refer to Graph API.