Introduction and Summary of G6 Use

Posted on 2021-06-09 Edited on 2024-11-19 In Sundry Waline:

In this week’s work, there is a requirement for me to generate a Decision Tree on the front end, so I went to investigate a lot of open source solutions. Here is the chart I investigated at the beginning. You can take a look and choose according to your own choice. Suitable, and finally I chose G6.

ActuallyG6的文档It’s already considered very good, so I have two main purposes for writing this blog:

According to my own experience, re-organize it into the way I am used to remembering, so that I can view it myself in the future.
Summarize a few small pits stepped on during use.

Here to complain, G6 is too unfriendly for TypeScript, all properties are optional, and sometimes write down a bunch of question marks

Component Library	Difficulty of Getting Started	Performance	Degree of Freedom/Mature Solutions	Remarks
G6	doc is more detailed:前言	The number of nodes is small, but it is more practical when a single node is more complex	High degree of freedom, support custom nodes	mainly for graph analysis
X6	doc is more detailed 快速上手	There are many nodes, but a single one is simple, and it is more practical when dragging and dropping operations		mainly does graph editing
ggEditor	There is almost no doc, and doc is not updated alibaba/GGEditor			Ant Financial team is based on G6 + React encapsulation, compatible with React, but has not been updated, using version 3.5 of G6
Graphin	功能概览		Low degree of freedom, only supports circular nodes, cannot be customized and existing solutions do not meet the requirements, mainly for graph analysis, not graph editing	Ant Financial team based on G6 + React encapsulation, compatible with React better
JointJS				charge, and the license is MPL-2.0
jsPlumb		Based on Jquery and canvas, mass operations may be problematic		Some mismatches with React in use
D3	doc is relatively clear, but it is relatively low-level, so it is difficult to achieve the requirements		higher degree of freedom, but it feels more primitive, not as mature as X6	If G6 and X6 are compared to arco, this is more like react
spritejs	doc is relatively clear, but it is relatively low-level, so it is difficult to achieve the requirements		Ditto	Ditto

How to use G6 in React

At first I was still hovering between GGEditor and G6, because my front-end project is based on React, it may be more convenient to use GGEditor, but I found the officially recommended use example in React on the official website of G6, and decided to use G6, this is the link to the official force: https://g6.antv.vision/zh/docs/manual/advanced/g6InReact

G6 Core Concepts

Here’s a picture from the official website

Let me help you sort out the relationship between these core concepts:

Figure

In G6, the composition of objects and relationships. It is not even limited to vision, the data of subjects and relationships can also be called graphs. In G6, the Graph object is the carrier of the graph, which contains all the elements on the graph (nodes, edges, etc.), and mounts the related operations of the graph (such as interactive listening, element manipulation, rendering, etc.). The life cycle of the Graph object is: Initialize - > Load Data - > Render - > Update - > Destroy.

Graphics

Graphics: Also known as Shape, Shape refers to the graphics and shapes in G6, which can be circles, rectangles, paths, etc. It is generally related to nodes, edges, and Combo in G6. ** Each node/edge/Combo in G6 consists of one or more Shapes. The configuration of nodes, edges, Combo, and label text will be reflected on the corresponding graph. **

Since each node can be composed of multiple graphs, all graphs in the same node can form a group, that is, the ** graph grouping **, and each group has a ** key graph ** (keyShape), like the key graph of the built-in rect node is a rect graph.

However, so far, the grouping concept I have been exposed to is generally only used when customizing nodes, which will be explained later when customizing nodes.

Each graphic has its own properties, different graphics have common properties, but also have their own unique properties, common properties, such as the fill color of the graph, border color, border width, shadow color, shadow position and so on.

Individual properties such as rectangles will have width and height, circles will have radius, and so on.

A graphic grouping group similar to g in SVG is a container for combining graphic objects. Adding transformations (such as clipping, rotation, scaling, translation, etc.) to a group applies to all its child elements. Adding properties (such as color, position, etc.) to a group will be inherited by all its child elements. In addition, group can be nested in multiple layers, so it can be used to define complex objects.

** Graphic transformation ** refers to rotation, scaling, etc

Layout

The layout is some of the layout methods that come with G6 to help you arrange the location of automatic nodes. Since I am going to generate a Decision Tree this time, the location of each node needs to be controlled by myself, so I didn’t look carefully. If you need it, you can Go to the official website to check

Interactions and events

Events can be divided into the following four levels:

canvas, graphic level events, ‘mousedown’, ‘mouseup’, ‘click’, ‘mouseenter’, ‘mouseleave’, etc.
Node/edge events, ‘node: mousedown’, ‘edge: click’, etc., with’type: eventName 'as the event name;
Timing events:
- Events when the node/edge is added or deleted, for example: ‘beforeadditem’, ‘afteradditem’, etc.;
- Events when node/edge state changes: ‘beforerefreshitem’ and’afterrefreshitem ';
- Layout timing: ‘beforelayout’ and’afterlayout '.

If you want to know all the events supported by G6, please refer to Event API。

On top of events, G6 defines Behavior, which is actually a collection of events and their handling functions. We can see it from how to customize an event:

G6.registerBehavior('activate-node', {
  getDefaultCfg() {
    return {
      multiple: true
    };
  },
  getEvents() {
    return {
      'node:click': 'onNodeClick',
      'canvas:click': 'onCanvasClick'
    };
  }
  onNodeClick(e) {
    const graph = this.graph;
    const item = e.item;
    if (item.hasState('active')) {
      graph.setItemState(item, 'active', false);
      return;
    }
    //The configuration can be obtained on this. If multiple'active 'are not allowed, cancel the'active' status of other nodes first
    if (!this.multiple) {
      this.removeNodesState();
    }
    //set the clicked node status'active 'to true
    graph.setItemState(item, 'active', true);
  },
  onCanvasClick(e) {
    //shouldUpdate can be replicated by the user, cancel the'active 'state of all nodes when returning true, i.e. set the'active' state to false
    if (this.shouldUpdate(e)) {
      removeNodesState();
    }
  },
  removeNodesState() {
    graph.findAllByState('node', 'active').forEach(node => {
        graph.setItemState(node, 'active', false);
      });
  }
});

Of course, G6 also has many built-in events, such as dragging nodes, dragging or scaling canvases.

On top of the event, the interaction mode is defined, and each interaction mode is a collection of several behaviors, such as

const graph = new G6.Graph({
  container: 'mountNode',
  width: 500,
  height: 500,
  modes: {
    //supported behavior
    default: ['drag-canvas', 'zoom-canvas'],
    edit: ['click-select'],
  },
});

The above is an example of a schema definition. Two schemas are defined on the diagram, namely’default ‘and’edit’. Where’default 'contains two Behavior: “drag-canvas” and “zoom-canvas”, both use the default parameters of the behavior.

Status

The ** state ** in G6 refers to the state of a node or edge, including ** interaction state ** and ** business state **.

In G6, the way to configure interaction state and business state is the same. For some users who only use G6 to complete the development of a certain requirement, but do not want to deeply understand G6, in fact, there is no need to distinguish between interaction state and business state, and define state in the same way, without understanding the cost at all.

Interaction state

The interaction state is closely related to the specific interaction action. For example, if the user uses the mouse to select a certain node, the node is selected, and if the user hovers to a certain edge, the edge is highlighted.

Interaction state is handled by default in G6.

Business status

Refers to the state customized according to user business needs. Business state is independent of interactions, strongly related to specific business logic, and can also be understood as strongly Data driven. For example, the execution status of a task, the approval status of an application, etc., different data values represent different business states. Business state is independent of user interactions, but the processing method in G6 is the same as interaction state.

Whether it is a node or an edge, their properties are divided into two types:

Graph element

This time, the main use is to customize nodes and edges, mainly to step on pits, all in the following summary

Summary

Graph properties are different from node properties, although there are many identical configurations
Custom dom node, can only take effect when render is svg mode
The time on the custom dom node will not be monitored by the graph, but intercepted by itself.
When customizing the node, the first call to addShape on the graph grouping returns the key shape, and the further back the shape, the closer it is, that is, it will overlay the previous shape.