The author gathered together with ant Financial ·AntV team

AntV G6 is an open source graph visualization engine that focuses on graph visualization and graph analysis. Welcome to our GitHub: github.com/antvis/G6 official website: g6.antv.vision/zh/

G6 3.3-Beta for the new era arrived on January 16, 2020! This time around, G6 is all about improving performance and TypeScript. Take a look at the new features in G6.

How to upgrade migration? See the TS G6 3.3 Upgrade Guide.

🔥 performance upup

As a graph visualization framework, the data displayed by G6 is generally characterized by large amount of data, large number of pixels and frequent dynamic updates. Canvas rendering has become the pain point of G6 that consumes the most performance.

To address this issue, we fully upgraded the underlying rendering engine in G6 3.3-Beta: local rendering, autorendering, delayed rendering, and auto-clipping mechanisms were used instead of dynamically updating a graph with individual elements requiring global redrawing.

This improvement greatly improves the interaction experience, especially the interaction of highlighting, selecting and dragging nodes/edges under big data.

On a graph with 10,000 nodes, the performance comparison for drag and drop interactions is shown below (each node with one text, meaning 20,000 primitives on a graph). And text is a huge performance drain).

Chrome on MacBook Pro with 2.5ghz Intel Core I5, 16 GB 2133 MHz LPDDR3

< 3.2 G6 G6 3.3
Dragging delays are serious Slightly trailing, smooth to follow

Drag and drop a node on this figure, it can be seen that in G6 3.2 and earlier versions (left figure), drag and drop is very slow, and the dragged node basically cannot follow the mouse, resulting in poor interaction experience. The updated G6 3.3-Beta (right image) can follow the mouse smoothly, although the drag phenomenon is a little bit under such a large amount of data.

The following figure shows the performance of G6 before and after the upgrade as the number of nodes increases. Blue and green lines represent the performance curves before and after the upgrade.

Chrome on MacBook Pro with 2.5ghz Intel Core I5, 16 GB 2133 MHz LPDDR3

(left) The relationship between the total number of nodes and the render frame rate; (right) The relationship between the total number of nodes and CPU usage.

The top left figure shows how the frame rate of the canvas changes as the number of nodes on the graph increases (each node still has one text, so the number of primitives is twice the number of nodes).

In the diagram of 7000 nodes, the FRAME rate of G6 before the upgrade is less than 2, and normal interaction is basically impossible. The updated G6 still has a high framerate on 17000 graphics.

The upper and right figure shows the relationship between the total number of nodes and CPU usage when dragging and dropping a single node.

In G6 3.2, when the number of nodes is 3000, the CPU usage reaches 100%. In the upgraded version, when the number of nodes is 3000, the CPU usage is less than 75%, and when the number of nodes is 17,000, the CPU usage is less than 100%.

🔥 hug TypeScript

At a time when TypeScript is becoming the norm of choice for front-end development, G6 doesn’t want to be left behind. In the 3.3-beta version of G6, we refactored all of our code in TypeScript, and improved type definitions and error messages greatly improved the productivity of developers.

🔥 More liberal element and layout configuration

  • In addition to the original support node is the key of the style of the graphics update, the new version to support the built-in element on other graphic style dynamically add or delete and update: | dynamically add or delete the label card, linkPoints, dynamic update icon | node pair of text, add or delete icon | | : – : | : – : | |

    |

    |

  • More stable free layout configuration: | Grid layout support ranks number specified | Radial layout support specified node tree clustering configuration | Dagre support automatic computing line control point layout, repair sensitive nodes order | | : – : | : – : | : – : | |

    |

    |

    |

🔥 Richer build artifacts

In G6 version 3.3, we offer a variety of build artifacts:

  • Es: Support es5 artifacts;
  • Lib: commonJS support artifacts;
  • Dist: Artifacts that support UMD.

🔥 Test coverage upup

In this upgrade, we conducted a comprehensive test:

  • Line coverage > 95%;
  • Branch coverage > 87%

Based on the present

Looking back at 2019, G6 has undergone a comprehensive architecture upgrade, with the new G6 3.x. It went from 3.0 to 3.3-beta step by step. We’ve really figured out what the G6 is for: a graph visualization engine.

Improve Layout, components, animation status, independent mechanism, greatly improve ease of use and function; State management mechanism is added for analysis scenarios, which is very easy to use in graph analysis scenarios. Anchor point and control point mechanism removed. Focus on graphic presentation and analysis, not re-editing scenes.

2019 is also a year of greater openness for G6. The G6 team changed from a small workshop of one person to a working group of 5 + people; From 1-2 core developers to 10+ people contributing code; From community isolation to an exchange group of nearly 1,000 people.

G6 is no longer just an open source code library, it will become a more open, inclusive and diverse organization.

Special thanks to

Thanks to all G6 users, with your feedback and supervision, G6 can better develop; Special thanks to the contributors who contributed code to G6. Thanks to your dedication, G6 will continue to grow with confidence.

Special thanks again to the contributors who contributed code to G6:

The following is a list of GitHub contributors to G63. x, in no particular order.

elaine1234 Shu-JI huxiaoyu zxc0328 Echo009 mage3k Deturium scaletimes afc163 crystalwm bzhangzju hstarorg vellengs gaoli Lxfu Spengjie EarlyH Zhengbigbig Anderson-Liu Fanlinqiang Cyrilszq Hujiulong.

conclusion

The release of G6 3.3-beta is another step forward, but it’s only the beginning. The G6 3.3-Beta fixes some of the performance issues that plagued us and is much friendlier to TS developers, but it still doesn’t completely solve the interaction issues. We are also constantly exploring solutions to all known problems with interactions and events. We hope to give you a satisfactory answer when the official version of G6 3.3 is released.

  • AntV G6 is an open source graph visualization engine that focuses on graph visualization and graph analysis.
  • Welcome to follow and star on our GitHub: github.com/antvis/G6
  • Liverpoolfc.tv: g6. Antv. Vision/useful /
  • Graphin, a relational visual analysis tool based on G6 packaging
  • Liverpoolfc.tv: graphin. Antv. Vision/useful