# draw_tree_with_antv_x6

**Repository Path**: damon592/draw_tree_with_antv_x6

## Basic Information

- **Project Name**: draw_tree_with_antv_x6
- **Description**: 使用antv_x6绘制简单树的demo
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-09-10
- **Last Updated**: 2024-10-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 简介

使用antv/x6+vue简易画树 demo(2/n叉树，导入导出) -- 实现收缩、增删子节点（自定义）

# 效果展示

![输入图片说明](public/antv_x6_%E7%94%BB%E6%A0%91_%E5%92%8C%E5%8F%A6%E5%A4%96_9_%E4%B8%AA%E9%A1%B5%E9%9D%A2_-_%E4%B8%AA%E4%BA%BA_-_Microsoft__Edge_2024-10-09_09-59-19.gif)


# 实现功能预览

1.  生成模拟树数组（模拟后端存储的树结构）
2.  **树生成算法** -- 根据树数组数据（模拟/后端存储）计算并生成`andv/x6`的树结构（树节点，边节点，收缩节点）
3.  **收缩节点** -- 点击后收缩子树
4.  **动态增删节点** -- 可以点击选中节点，新增子节点和删除节点后，更新视图
5.  **导出图片** -- 使用`andv/x6`插件导出树图片
6.  **小地图** -- `antv/x6`插件
7.  **全屏/退出全屏展示** -- 基于`vueuse`的`useFullScreen`

# 掘金详解

[含代码仓库 - 使用antv/x6+vue简易画树 demo(2/n叉树，导入导出) -- 实现收缩、增删子节点（自定义）](https://juejin.cn/post/7423293748975648819)