AntV X6绘图使用指南

· 1 min read

最近工作需求绘制DAG图,并且有交互操作,经过调研后,决定使用Antv x6解决。在实际使用后,总结下常见问题。

x6、g6等如何选

antv下面有很多可视化图类库,如何选择呢。实际上几个类库的定位不同,按需使用即可。这里贴下官方对于各个类库的介绍。

antv插件

可以看到antv提供了很多plugin,按需进行加载。比如实现backspace按键删除选中节点组件的话,需要selection和keyboard。

具体插件清淡的话,见这里 https://github.com/antvis/X6/tree/master/packages

节点自定义样式

自动布局

  • 安装依赖包dagre
  • 初始化渲染时,layout(graph)方法即可。

layout实现代码如下,仅供参考。

https://gist.githubusercontent.com/alanhe421/1e2942d8e7134a53f1e54d4802c3e437/raw/f0b06508525f12874d36831935e8fb04dcb39a4c/antv-x6-layout.ts

3d/2.5d支持?

官方并没提供方案支持,目前需要自行解决。

2.0计划

👉 https://www.yuque.com/antv/x6/sk3zdn_nsgg4p

相关文档

Authors
Developer, digital product enthusiast, tinkerer, sharer, open source lover