https://github.com/hwc0919/treeplayground

Tree Visualization Tool for Learning Data Structure and Algorithm.
https://github.com/hwc0919/treeplayground

avl-tree bst data-structure-and-algorithm redblack-tree splay-tree tree-structures tree-visualizer

Last synced: 13 days ago
JSON representation

Tree Visualization Tool for Learning Data Structure and Algorithm.

• Host: GitHub
• URL: https://github.com/hwc0919/treeplayground
• Owner: hwc0919
• License: mit
• Created: 2020-02-29T15:28:23.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T15:30:56.000Z (over 2 years ago)
• Last Synced: 2025-04-14T14:22:45.171Z (13 days ago)
• Topics: avl-tree, bst, data-structure-and-algorithm, redblack-tree, splay-tree, tree-structures, tree-visualizer
• Language: JavaScript
• Homepage: https://hwc0919.github.io/tree
• Size: 1.1 MB
• Stars: 23
• Watchers: 2
• Forks: 4
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# TreePlayground

#### Tree Visualization Tool for Learning Data Structure and Algorithm.

## Start

Just visit https://hwc0919.github.io/tree/ , or download contents in folder 'docs' to run offline.

[Backup Link](http://192.144.210.149/).

Program can run perfectly on Chrome and Firefox. Windows Edge is only functional when exploring online.

## 开始使用

可直接访问 https://hwc0919.github.io/tree/ , 也可以下载文件夹"docs"中的内容本地运行. 

[备用链接](http://192.144.210.149/).

Chorme和Firefox浏览器可以正常运行. Edge浏览器可以在线运行.

感谢

[@Wasted-waste](https://github.com/Wasted-waste),

[@B5DX](https://github.com/B5DX),

[@lijingwei233](https://github.com/lijingwei233),

[@baijiangying](https://github.com/baijiangying),

等同学对调试的帮助和建议

## Overview | 概览

![image](https://raw.githubusercontent.com/wiki/hwc0919/TreePlayground/recommend1.png)

![image](https://raw.githubusercontent.com/wiki/hwc0919/TreePlayground/recommend2.png)

![image](https://raw.githubusercontent.com/wiki/hwc0919/TreePlayground/recommend3.png)

![image](https://raw.githubusercontent.com/wiki/hwc0919/TreePlayground/recommend4.png)

![image](https://raw.githubusercontent.com/wiki/hwc0919/TreePlayground/recommend5.png)

## Objective | 目标

本项目旨在帮助学习数据结构课程搜索树相关章节的同学(在此强烈推荐清华大学邓俊辉老师的数据结构课, 可在[学堂在线](https://next.xuetangx.com/)免费学习).

项目计划建造一个"树游乐场", 包括一般二叉树, BST, AVL, Splay, RedBlack等等...

在此用户可以随意的构建树形结构, 动态的插入、删除、搜索节点，以及进行节点的遍历.

所有操作都是动态的、逐步视觉反馈的.

## Some detail | 一些细节

本项目使用html5, typescript, vue.js实现, 并用webpack打包. 项目入口为一个html文件, 可直接在本地运行.

为实现动态性, 使用了很多异步代码, 代码的可读性收到一些影响.

红黑树暂未实现步骤可视化.

如果你发现了bug, 请在Issue里提出, 十分感谢.

喜欢的话别忘了给Star哟

## Interesting Samples | 有趣的例子

Copy and use ***Build*** button to build the tree.


使用 ***Build*** 按钮构建树

#### AVL

21,12,28,7,17,25,31,4,10,15,18,23,27,30,32,2,6,9,11,14,16,17.5,19,22,24,26,,29,,,,1,3,5,,8,,,,13,14.5,15.5,,17.3,,,,21.5,,,,,,,,0,,,,,,,,12.5