在一些管理系统中，会对组织架构、级联数据等做一些管理，你会怎么实现呢？在经过调研很多插件之后决定使用 Antv G6 实现，文档也比较清晰，看看怎么实现吧。

使用antv/g6遇到了版本问题，polyline快点问题，添加同级节点问题。通过升级版本，添加同级节点，创建自定义边解决了问题。

G6作为一款国产图可视化引擎，可以实现很多d3才能实现的可视化图表，相比较d3来说，它拥有中文官方文档，对于阅读和学习会更加方便。虽然还有些小的问题，场景也不够多远，但是G6提供的布局和交互能力基本可

更新内容最新版本请关注G6官方的github仓库https://github.com/antvis/g6相关资源下载antVG6(v1.2.8)字体图标技术栈Vuev3.0.1Element-uiv2

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。本文使用antv G6 + react + typescript实现一个数据血缘图，展示数据的来源和流向。

项目中需要实现一个如下图的树图，需要实现的功能包含：节点可展开收齐、默认展开三层节点、节点hover的时候需要tooltip展示更多内容、对于同比信息需要有上升下降的箭头等…… 了解到antv G6可

vue2 + antv X6ANTV X6 简介 X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用

文章展示了接入AntV G6到Vue中并实现需求的过程，其中的难点主要集中在自定义节点和边的部分，除了熟悉文档相关内容，还需要对SVG path掌握一定的知识。希望本篇文章能帮助将要使用次技术的朋友。

此篇文章是Vue中使用AntV G6的第二篇文章，与上篇详细讲解配置和思路不同，这篇文章主要是展示实现需求的实际代码。