1. Introduction

The author is doing some visualization tasks recently, and the specific requirement is to draw a tree diagram on the page. After referring to and comparing the mainstream programs in the community, Antv G6 was finally selected. In the use of the process also encountered some problems, I want to write a blog record.

2. Introduction

Antv G6 is an open source graph visualization engine of ant data visualization team. It provides a series of elegantly designed and easy-to-use graph visualization solutions based on high customization capabilities. It can help developers build their own graph visualization, graph analysis, or graph editor applications.

3. The structures,

The project was built using VUE-CLI, still using the Vue2. X version. During the construction, the configuration can be based on the actual requirements. Here, we choose the default configuration. The specific configuration can be seen in VUe-CLI, which is not expanded here. Then download Antv G6, and finally import the files you need to use.

Antv g6 NPM install --save @antv/g6 #step3: Antv g6 NPM install --save @antv/g6 #step3: antv g6 NPM install --save @antv/g6 #step3: antv g6 NPM install Import g6 from '@antv/g6';Copy the code

4. Core concepts

Before we use it, let’s take a look at some of the core concepts in Antv G6. Here’s the official mind map. Because the author has not used some functions in depth, so there is no introduction here, you can check in the official website.

4.1 Graph

In G6, the Graph object is a kind of Graph carrier, containing all the elements of the Graph and mounting the various operations of the Graph. Graph also has the concept of a life cycle, initialize – > load data – > render – > update – > destroy. To visualize a Graph, our first step is to instantiate a Graph object.

// instantiate Graph const Graph = new g6. Graph({container: "", // Specify the container of the Graph canvas. 800})Copy the code

After executing the above code, we return a Graph object that will be used for all our subsequent operations. In addition, the above configuration items are only necessary during initialization. For more configuration items, please refer to the official website.

Figure 4.2 elements

Diagram elements include Node, Edge, and Combo (similar to Node Group). Each diagram element can be composed of multiple Shapes, but they can all be composed of only one KeyShape. Shape refers to simple shapes, such as rectangles, circles, text and so on. There are many built-in nodes, sides and Combo in G6. In addition, G6 also provides the ability to customize nodes/sides/Combo by matching and combining shapes. Graph elements have many common attributes and methods, and different graph elements have some special attributes and methods.

Figure 4.3 layout

How our diagram elements need to be laid out on the artboard. G6 has a variety of built-in layout algorithms that can calculate the coordinate information of each graph element. The layout algorithm only calculates the x and y of the elements and does not deal with the rendering task, so we can also reference the external algorithm to calculate the coordinates and then render G6.

4.4 Interactions and Events

G6 provides rich interactive capabilities, and here are a few important concepts that we will introduce separately.

4.4.1 behaviors

Behavior is a mechanism provided by G6 to define interaction events on the graph, such as drag-and-drop, zooming, etc. These are all built-in behaviors, and we can also register custom behaviors. Use it in conjunction with interactive mode.

4.4.2 Interactive Mode Mode

We can manage Behavior by setting mode. As to why this concept arises, we can imagine a scenario where the user selects edit mode and drags nodes, while read-only mode does not require this interaction. So G6 provides such a mechanism to manage. The default mode is default.

4.4.3 State State

In G6, state refers to the state of a node or edge. It’s not uncommon to have a situation where you have to change some state after triggering some event/interaction. We can do this by setting State, and we can also configure styles for different states.

4.4.4 Listening and binding events

In addition to the above event management capabilities, we can also directly listen for an event or timing. Events in G6 can be divided into the following categories:

  • Mousedown, mouseup, Click, mouseEnter, mouseleave, etc.

  • Node :mousedown, edge:click, etc., with type:eventName as the eventName;

  • Timing event:

    • Events when objects/edges are added or deleted, such as beforeAddItem, AfterAddItem, etc.
    • Events when node/edge state changes: BeForerefreshItem and AfterRefreshItem;
    • Layout timing: beforelayout and afterlayout.

So that’s the basic concepts, and now we’re going to get to the real thing.

5. Use

Here we implement a simple demo, using darge layout to implement a tree structure, here simply encapsulates a GraphVisual class to implement graph initialization and rendering. Why we didn’t use TreeGraph is covered in the next section.

5.1 Instantiating Graph

Instantiating the Graph with the parameters passed in, we define the node and edge styles, specify the layout algorithm for the Graph, and the interaction, in addition to the necessary configuration.

initGraph(){ const container = this.container const {width, height, direction} = this.config const graph = new G6.Graph({ container, width, height, modes: { default: ['drag-canvas', 'zoom-canvas'] // Specify the interaction mode in default mode}, defaultEdge: {type: 'line' // specify the type of edge}, defaultNode: {type: 'rect', size: [60, 30], // Specify the point of the edge link anchorPoints: [[0.5, 0], [0.5, 1]]}, // Set the graph layout algorithm Layout: {type: 'dagre', rankdir: direction, ranksep: 20, nodesep: 20 } }) this.graph = graph }Copy the code

5.2 Data processing and rendering

The initialized graph data is an object containing the array of Nodes and edges, and we want to convert the data into this form. After binding with graph’s data method, graph’s Render method is called to render the element onto the artboard.

const data = {
  nodes: [
    {
      id: 'node1',
      label: 'node1',
    },
    {
      id: 'node2',
      label: 'node2',
    },
  ],
  edges: [
    {
      source: 'node1',
      target: 'node2',
    },
  ],
}

this.graph.data(data)
this.graph.render()
Copy the code

5.3 Used in Vue

Get the DOM object by ref and pass the data along to GraphVisual. Finally, let’s preview the results of the run.

<template>
  <div id="app" ref="container"/>
</template>

<script>
import {treeData} from './data'
import {GraphVisual} from './utils/MatchVisual'
export default {
  name: 'App',
  components: {},
  data() {
    return {
      treeData
    }
  },
  mounted(){
    new GraphVisual(this.$refs.container, this.treeData)
  }
}
</script>
Copy the code

As Antv G6 has many apis, the types of graphs that can be realized are also very rich. Here the author will not be detailed to use the demo implementation, interested in the official website can view the example.

6. Problems encountered in previous use

6.1 Performance Problems

When the author was rendering 1000+ node data into a tree structure, the first screen rendering took 6 or 7 seconds. I didn’t figure out what the problem was at the beginning. A performance demo provided by the official, only appeared when the number of nodes was 50000+, the interaction was slow, and the first screen load was only about 8s. Later, I found the answer on github issue. When edge was implemented, it used polyline type. Due to the high complexity of polyline automatic path walking algorithm, rendering performance problems were caused. The custom implementation of Polyline was followed, and now the rendering speed is less than 1s.

6.2 Layout Problems

It is also a problem encountered when doing tree layout. In the case of many layers of data, the nodes in the last layer always overlap. According to some official layout configuration has not been solved. In the end, a more crude way, directly set the width of the node space. There might be a better solution but I haven’t found one yet.

6.3 TreeGraph

Tree layout provides a very powerful ability to basically meet the needs of the tree diagram. TreeGraph cannot be used in combination with Combo. In the previous section, we mentioned why TreeGraph is not used. After looking at some layout demos and deciding to switch to Dagre, you can basically restore TreeGraph.

7. Write at the end

Since the author is not very rich in experience and has not been in contact with Antv G6 for a long time, I welcome you to point out any mistakes in the article.