G6 is a graph visualization engine, which provides a set of basic mechanisms, including rendering, layout, analysis, interaction, animation, and other auxiliary tools. G6 aims to simplify the complex relationships, and help people to obtain the insight of relational data.
This tutorial introduces how to combine creating and rendering a graph, configuring items, layout, interaction, animation, and other tools to complete the final Tutorial Demo. The readers will learn the basic and key concepts of G6 in this tutorial.
There are 6 chapters in this tutorial:
- Create & Render a Graph
- Items & Their Configurations
- Utilize Layout
- Interaction Behaviors
- Plugins & Tools
- *Animation (not Required)
This tutorial is designed for people who prefer to learn by doing. If you prefer learning concepts from the ground up, check out our Key Concepts. You might find this tutorial and the guide complementary to each other.
Any code editor works for this Tutorial. We recommend to run this demo in Chrome. In this tutorial, we import G6 V3.7.1 by CDN. We simplified the code to make it easy. For other environments, please refer to the installation guide in Getting Started.
New an index.html file, and add the code below:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Tutorial Demo</title> </head> <body> <!-- import G6 by CDN --> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js"></script> <!-- 4.x and later versions --> <!-- <script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script> --> <script> console.log(G6.Global.version); </script> </body> </html>
Open index.html with your browser. It is success if there is the version number of G6 printed in the console.