Graph Library: Antv G6

This page contains an index of information, resources and quick links related to using antv G6 graph library.

In Circles FE, we plan to use G6 in two places:

• Graph for the Graphical Selector page to show the relation of course nodes between each other

• TreeGraph for representing a prerequisite tree

Graph vs TreeGraph

Antv G6 provides two options on how to create a graph (G6.Graph() or G6.TreeGraph()). Each has their own configuration and specific use cases.

• Graphical Selector uses Graph since its a graph and cannot be represented as a tree (i.e. breaks the definition by having interlinking edges)

• Prereq tree should use TreeGraph since it will most likely be in a tree structure

Graph Quick Links

https://g6.antv.vision/en/docs/api/Graph - Main Doc link

https://g6.antv.vision/en/docs/manual/middle/layout/graph-layout - Docs to customise on the graph layout

https://g6.antv.vision/en/docs/manual/middle/elements/methods/edgeVisible - Docs to show visibility of nodes

https://g6.antv.vision/en/docs/manual/middle/states/bindEvent - Binding events (i.e. on click event)

https://g6.antv.vision/en/docs/api/graphFunc/find - Finding elements on the graph

https://g6.antv.vision/en/docs/api/TreeGraph - Tree graphs

Tips

https://g6.antv.vision/en/docs/manual/middle/elements/advanced-style/set-label-bg/#gatsby-focus-wrapper

• need to render graph before making updates then paint the graph again to show the change