G6 is a graph visualization engine. It provides the basic capabilities of graph visualization such as drawing, layout, analysis, interaction and animation. It’s about making relationships transparent and simple. Give users Insight into relational data.

The G6 allows the development of topology diagrams, flow charts, brain diagrams, and all kinds of weird diagrams, and display them in the browser.




The development environment

  • Chrome ^88.0.4324.104 (official version)
  • Vue ^ 2.6.11
  • G6 ^ 4.1.11

Be aware of the development environment used in this article. This example uses Vue2 for development!!

If the library or browser version used in the exercise is inconsistent with the text, some functionality may not be implemented.


The running environment of this article is Chrome browser, if there are compatibility problems in other browsers, you can leave a message to discuss and solve together.




Pre-school preparation

  1. There is a certainhtml 和 cssBasic, this article does not explain the basic knowledge of this aspect.
  2. There is a certainvue 2Development experience, this article will not explainvueBasic usage.
  3. suggestioncanvasThe basics (it doesn’t matter).

This article uses VUE-CLI for development, so NPM will be used to install G6.

Quick learning

Get Started Fast – official documentation

1, install,

The CDN approach is very simple, you can read the document.

This article uses VUE-CLI for development, so NPM will be used to install G6.

By default, the reader has already created a vUE 2 project using VUe-CLI.

Enter the created VUE project and enter the following command on the terminal to install:

$ npm install --save @antv/g6
Copy the code

The $sign does not need to be entered. The $sign represents a command.

The g6 directory can be found in the @antv directory to prove that the installation is successful.


Code + comments

According to the official documentation, there are only five steps to creating a chart quickly.

  1. Create a container
  2. Introducing the G6
  3. To prepare data
  4. Creating a diagram
  5. Match the data source and render

The above steps will correspond in the code in the way of “[Step XXX]” comment.

<template>
  <div class="page-x">
    <! Create a container -->
    <div class="g6-x" id="containerG6" ref="containerG6"></div>
  </div>
</template>

<script>
// [Step 2] Introduce G6
import G6 from '@antv/g6'

export default {
  name: "Started".data() {
    return {
      graph: null.// [Step 3] Prepare data
      graphData: {
        / / point set
        nodes: [{id: "node1".// String, the unique identifier of the node if the node exists
            x: 100.// Number, optional, x value of node position
            y: 200 // Number, optional, y value of node position
          },
          {
            id: "node2".// String, the unique identifier of the node if the node exists
            x: 300.// Number, optional, x value of node position
            y: 200 // Number, optional, y value of node position}]./ / set
        edges: [{source: "node1".// String, must, start point ID
            target: "node2" // String, must, target point ID},]}}},methods: {
    // Initialize the diagram and render the data
    initGraph() {
      // [Step 4] Create a diagram
      const containerG6  = this.$refs.containerG6 // Get the container (DOM element)
      this.graph = new G6.Graph({
        container: containerG6, / / String | HTMLElement, must be created in Step 1 container id or the container itself
        width: containerG6.offsetWidth, // Number must be the width of the graph
        height: containerG6.offsetHeight // Number must be the height of the graph
      })

      // [Step 5] Match the data source and render
      this.graph.data(this.graphData) // Read the data source from Step 2 onto the graph
      this.graph.render() / / rendering}},mounted() {
    this.initGraph()
  }
};
</script>

<style scoped>
.g6-x {
  width: 800px;
  height: 500px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  margin-left: 20px;
}
</style>
Copy the code

The effect is shown below

This case refers to the official starting case.


In the data of Step 3, nodes and edges are mainly used.

Nodes are a collection of all points and are data types. Each point needs to have an ID attribute, and the ID is unique.

The x and y in Nodes represent the position of the point on the canvas.

In this example, the edges are dependent on Nodes.

Edges are a collection of all edges, an array type. You have as many edges as you need to draw.

Each edge requires a source and a target.

Source is the start point, and the value is the ID of the start point.

Target is the target point and the value is the ID of the target point.


Step 4 Use new g6.graph to create a Graph.

Container, width, and height are mandatory. If you do not fill in these items, you will get an error.

Container is the ID or instance of a container. This example was developed using Vue 2, so $refs is used to get the container instance (in this case containerG6).

Width is the width of the graph. In this example, containerg6.offsetwidth is used to make the width of the container the width of the graph.

Height is the height of the graph. In this example, ‘containerg6.offsetheight’ is used to specify the height of the container as the height of the graph.


Step 5

Use graph.data() to initialize graph data. The parameters passed in are the data prepared in Step 2.

Use the graph.render() method to render the data.

graph.data()The official documentation

graph.render()Official document


3, the source address

This example source address

Vue-router is still used for development in this project, but vue-Router part will not affect the use of G6.

References for this example




read

G6 domestic official website

G6 official quick start documentation

This example source address