9.2 KiB
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 necessaryid
to identify different nodes.x
andy
specify the position of the node. - The
edges
array contains edge objects.source
andtarget
are the required properties of each edge, representing theid
of the starting point and theid
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:
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 usingasync
/await
. Here, for convenience, we put the main logic inside themain
function. If you have any questions about fetch andasync
/await
, you can refer to the async function, Fetch API.
After running the code, we get the following result:
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.14/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.