AntV X6 Diagramming Guide
Recently, a work requirement needed to draw DAG graphs with interactive operations. After research, I decided to use AntV X6 as the solution. After using it in practice, here’s a summary of common issues.
How to choose between X6, G6, and others
There are many visualization graph libraries under AntV, so how do you choose? In fact, each library has a different positioning, so use what fits your needs. Here’s the official introduction to each library.
AntV plugins
As you can see, AntV provides many plugins that can be loaded as needed. For example, to implement a component that deletes selected nodes with the backspace key, you need the selection and keyboard plugins.
For a specific list of plugins, see here: https://github.com/antvis/X6/tree/master/packages
Custom node styles
Automatic layout
- Install the dependency package
dagre - During initial rendering, just call the
layout(graph)method.
The implementation code for layout is as follows, for reference only.
3D/2.5D support?
The official library doesn’t provide a solution for this; you currently need to solve it yourself.
2.0 Plan
👉 https://www.yuque.com/antv/x6/sk3zdn_nsgg4p
