test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-15 18:11:08 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity
5a905f1f74
g6/packages/site/docs/manual/tutorial/example.en.md

9.2 KiB
Raw Blame History

title order
Render the Tutorial Demo 1

This article will provide a simple drawing and configuration example for the Tutorial Example. Through this article, you will learn about some commonly used configuration options and their functions when creating a general graph.

Basic Drawing

Creating a Container

To contain the G6 graph, you need to create a container in HTML, usually a div tag. G6 will append a canvas tag under this container and draw the graph in it.

<body>
  <div id="container"></div>
  <!-- Import G6 -->
  <!-- ... -->
</body>

Preparing the Data

The data source for G6 is a JSON-formatted object. The data format of v5 is different from v4. For more information, please refer to the Data Format Change section. v5 also provides a data conversion processor for v4 data, which will be explained in the following graph configuration.

The data needs to include the nodes (nodes) and edges (edges) fields, represented by arrays:

const data = {
  // Nodes
  nodes: [
    {
      id: 'node1', // string | number, required if the node exists, the unique identifier of the node
      data: {
        // Store some business attributes or special node configurations
        name: 'Circle1',
      },
    },
    {
      id: 'node2', // string | number, required if the node exists, the unique identifier of the node
      data: {
        // Store some business attributes or special node configurations
        name: 'Circle2',
      },
    },
  ],
  // Edges
  edges: [
    {
      id: 'edge1',
      source: 'node1', // string | number, required, the id of the starting point
      target: 'node2', // string | number, required, the id of the target point
      data: {}, // Store some business attributes or special edge configurations
    },
  ],
};

⚠️ Note:

  • The nodes array contains node objects. Each node object has a unique and necessary id to identify different nodes. x and y specify the position of the node.
  • The edges array contains edge objects. source and target are the required properties of each edge, representing the id of the starting point and the id of the target point, respectively.

Graph Instantiation

When instantiating the graph, at least the container needs to be set for the graph. If you are using the graph data format of G6 v4, you can configure transforms: ['transform-v4-data'] when instantiating the graph. 'transform-v4-data' is a built-in data converter in G6 v5, which will format the v4 data into the format required by v5 after reading the data.

// const data = { ... }
const graph = new G6.Graph({
  container: 'container', // String | HTMLElement, the id of the container created in Step 1 or the container itself
  width: 800, // number, the width of the graph, use the width of the container if not specified
  height: 500, // number, the height of the graph, use the height of the container if not specified
  // transforms: ['transform-v4-data'] //
});

Rendering the Graph

// const initData = { ... }
//  const graph = ...
graph.read(data); // Load data

Drawing Result

After calling the graph.read(data) method, G6 will draw the graph based on the loaded data. The result is as follows:

img

Loading Real Data

In the previous sections, we used data with only two nodes and one edge, and directly defined the data in the code. However, the data in real scenarios is usually loaded from remote interfaces. For convenience, we have prepared a JSON data file for readers. The address is as follows:


https://raw.githubusercontent.com/antvis/G6/v5/packages/g6/tests/datasets/force-data.json

Load Remote Data

Modify index.html to asynchronously load remote data sources using the fetch function and pass them into the G6 graph instance:

// const graph = ...
const main = async () => {
  const response = await fetch(
    'https://raw.githubusercontent.com/antvis/G6/v5/packages/g6/tests/datasets/force-data.json',
  );
  const remoteData = await response.json();
  // ...
  graph.read(remoteData); // Load remote data
};
main();

The fetch function allows us to make network requests and load data, and its asynchronous process can be better controlled using async/await. Here, for convenience, we put the main logic inside the main function. If you have any questions about fetch and async/await, you can refer to the async function, Fetch API.

After running the code, we get the following result:

img

At first glance, the image looks a bit strange, but the data has actually been correctly loaded. Due to the large amount of data, there are many nodes and edges, and the grid layout, which is the default, does not show the connection between the nodes. Next, we will use more graph configurations to make the data clearer and more visually appealing.

Common Configurations

The configurations used in this article and the common configurations used in subsequent tutorials are as follows:

Configuration Type Options / Examples Default Description
transforms Array ['transform-v4-data', { type: 'map-node-size', field: 'value' }] null Data processors. After the original user data enters the Graph, the processors in the transform are executed in order to obtain the processed data.
modes Object {
  default: [ 'drag-node', 'drag-canvas' ]
}		 null The collection of behavior modes on the graph.
node Object / Function {
  type: 'circle',
  keyShape: {
    ......
  }
}		 null The global attribute mapper of the node, including general attributes and style attributes (style). v5 also supports function mapping.
edge Object / Function {
  type: 'polyline',
  keyShape: {
    ......
  }
}		 null The global attribute mapper of the edge, including general attributes and style attributes (style). v5 also supports function mapping.
nodeState Object {
  hover: {
    ......
  },
  select: {
    ......
  }
}		 null The style attributes (style) of the node in states other than the default state, such as hover and select.
edgeState Object {
  hover: {
    ......
  },
  select: {
    ......
  }
}		 null The style attributes (style) of the edge in states other than the default state, such as hover and select.
plugins Array ['minimap', { type: 'tooltip', itemTypes: ['node'] }] null Plugins

Complete Code

The complete code is as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Tutorial Demo</title>
  </head>
  <body>
    <div id="container"></div>
    <script src="https://gw.alipayobjects.com/os/lib/antv/g6/5.0.0-beta.21/dist/g6.min.js"></script>
    <script>
      const graph = new G6.Graph({
        container: 'container',
        width: 1000,
        height: 600,
      });

      const main = async () => {
        const response = await fetch(
          'https://raw.githubusercontent.com/antvis/G6/v5/packages/g6/tests/datasets/force-data.json',
        );
        const remoteData = await response.json();
        graph.read(remoteData);
      };
      main();
    </script>
  </body>
</html>

⚠️ Note: 
If you need to replace the data, please replace  'https://raw.githubusercontent.com/antvis/G6/v5/packages/g6/tests/datasets/force-data.json' with the new data file address.