二叉树生成与展示（html）

最新推荐文章于 2022-06-28 22:21:46 发布
最新推荐文章于 2022-06-28 22:21:46 发布
阅读量1.3k 收藏 4
点赞数 1
分类专栏： 前端 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41856825/article/details/120012365
版权

学习二叉树数据结构的笔记
二叉树：

  • 树是计算机科学中经常用到的一种数据结构。树是一种非线性的数据结构，以分层的方式
    存储数据。树被用来存储具有层级关系的数据，比如文件系统中的文件；树还被用来存储
    有序列表。
  • 二叉树是一种特殊的树，它的子节点个数不超过两个。
  • 二叉树的插删改很快

代码定义
Node:节点类

        class Node{
            constructor(data,left,right){
                this.data = data;
                this.left = left;
                this.right =right;
            }
            show(){
                return this.data;
            }
        }

BST 二叉树

class BST{
            constructor(){
                this.root = null;
                this.rootArr = null; //用来记录tree的arr形式
            }
            //插入节点
            insert(data){
                let n = new Node(data,null,null);
                if(this.root == null) {this.root = n;}
                else{
                    let current = this.root;
                    let parent;
                    while(true){
                        parent = current;
                        if(data<current.data){
                            current = current.left;
                            if(current == null) {
                                parent.left = n;break
                            }
                        }else{
                            current = current.right;
                            if(current == null){
                                parent.right = n;break;
                            }
                        }
                    }
                }
            }
            //展示bst的arr结构
            show(){
                this.inOrder(this.root)
                return this.rootArr;
            }
            //tree->arr
            inOrder(node){
                if(node != null){
                    this.inOrder(node.left);
                    this.rootArr?'':this.rootArr=[];
                    this.rootArr.push(node.show());
                    this.inOrder(node.right);
                }
            }
    }

展示：

<h1 id = 'show'></h1>
function main(){
        let BSTObj  =  new BST();
        new Array(20).fill('').forEach(element => {
            BSTObj.insert(parseInt(Math.random()*100))
        });
        let _html = document.getElementById('show')
        _html.innerHTML = BSTObj.show().toString();
    }
    main();

用数组的形式去展示 感觉好low，low ,low ，有B格，咱得用图像 ,那怎么把这种结构用html和css在界面上展示出来呢。咱不会咱可以去膜拜一下大佬：用 DOM 与 CSS 展示二叉树

膜拜一下总会有收获的： 还摸了3张图（0……0）
css 收获

 /* 节点样式 */
        b{
            display: inline-block;
            width: 20px;
            background-color: aqua;
            border-radius: 50%;
            padding: 5px
        }
        div.tree {
            display: flex;
            flex-wrap: wrap;/*span 需要独占一行，所以此 flex 布局必须要折行显示 */
            align-items: flex-start; 
        }
        div.tree > span {
            width: 100%;
            text-align: center;
            padding-bottom: 3em;
            background-image: url(./img/both.svg);
            background-repeat: no-repeat;
        }
         /* 巧妙地子节点位置放置 */
         .tree > .tree {
            width: 50%;
        }
        /* 只有一个右节点使用 */
        div.just_only_right{
            flex-direction:row-reverse;  /*改变主轴的方向 */
        }
        div.just_only_right > span{
           background-image: url(./img/right.svg);
        }
        /* 只有一个左节点使用 */
        div.just_only_left > span {
            background-image: url(./img/left.svg);
        }
        div.no_child_node > span {
            background-image: none;
        }
        /* 左右子节点单独设置样式 */
        div.tree > .nleft {
            width: 50%;
            color: brown;
        }
        div.tree > .nright {
            width: 50%;
            color: aquamarine;
        }

js收获

 //展示bst的tree结构
            showTree2Html(root){
                if(root){
                    let onlyLeft  = (root.left && !root.right)
                    let onlyRight = (!root.left && root.right)
                    let noSubTree = !root.left && !root.right
                    return `
                    <div id='rootNode' class="
                        tree
                        ${noSubTree?'no_child_node':''}
                        ${onlyLeft?'just_only_left':''}
                        ${onlyRight?'just_only_right':''}
                    ">
                        <span> <b>${root.data}</b> </span>
                        ${root.left?this.showTree2Html(root.left):''}
                        ${root.right?this.showTree2Html(root.right):''}
                    </div>
                    `                    
                }
            }

成果测试

function main(){
        let BSTObj  =  new BST();
        new Array(20).fill('').forEach(element => {
            BSTObj.insert(parseInt(Math.random()*100))
        });
        let _html = document.getElementById('show')
        let _body = document.body;
        //DOMParser 实例的parseFromString方法可以用来直接将字符串转换为document 文档对象
        let _treedoc = new DOMParser().parseFromString(BSTObj.showTree2Html(BSTObj.root), 'text/html') 
        let _tree = _treedoc.getElementById('rootNode')
        _html.innerHTML = BSTObj.show().toString();
        _body.appendChild(_tree)
    }
    main();

效果
在这里插入图片描述
此过程额外收获

将HTML字符转换为DOM节点并动态添加到文档中
//DOMParser 实例的parseFromString方法可以用来直接将字符串转换为document 文档对象。
 let _body = document.body;
 //BSTObj.showTree2Html(BSTObj.root) 返回一个html字符模板：<div>ada</div>
 let _treedoc = new DOMParser().parseFromString(BSTObj.showTree2Html(BSTObj.root), 'text/html') 
 let _tree = _treedoc.getElementById('rootNode')
 _body.appendChild(_tree)

拿捏
完整例子

   <style>
        /* 节点样式 */
        b{
            display: inline-block;
            width: 20px;
            background-color: aqua;
            border-radius: 50%;
            padding: 5px
        }
        div.tree {
            display: flex;
            flex-wrap: wrap;/*span 需要独占一行，所以此 flex 布局必须要折行显示 */
            align-items: flex-start; 
        }
        div.tree > span {
            width: 100%;
            text-align: center;
            padding-bottom: 3em;
            background-image: url(./img/both.svg);
            background-repeat: no-repeat;
        }
         /* 巧妙地子节点位置放置 */
         .tree > .tree {
            width: 50%;
        }
        /* 只有一个右节点使用 */
        div.just_only_right{
            flex-direction:row-reverse;  /*改变主轴的方向 */
        }
        div.just_only_right > span{
           background-image: url(./img/right.svg);
        }
        /* 只有一个左节点使用 */
        div.just_only_left > span {
            background-image: url(./img/left.svg);
        }
        div.no_child_node > span {
            background-image: none;
        }
        /* 左右子节点单独设置样式 */
        div.tree > .nleft {
            width: 50%;
            color: brown;
        }
        div.tree > .nright {
            width: 50%;
            color: aquamarine;
        }
       
    </style>

<body>
    <h1 id = 'show'></h1>
    <script>
        // 节点
        class Node{
            constructor(data,left,right){
                this.data = data;
                this.left = left;
                this.right =right;
            }
            show(){
                return this.data;
            }
        }
        //二叉树
        class BST{
            constructor(){
                this.root = null;
                this.rootArr = null;
            }
            insert(data){
                let n = new Node(data,null,null);
                if(this.root == null) {this.root = n;}
                else{
                    let current = this.root;
                    let parent;
                    while(true){
                        parent = current;
                        if(data<current.data){
                            current = current.left;
                            if(current == null) {
                                parent.left = n;break
                            }
                        }else{
                            current = current.right;
                            if(current == null){
                                parent.right = n;break;
                            }
                        }
                    }
                }
            }
            //展示bst的arr结构
            show(){
                this.inOrder(this.root)
                return this.rootArr;
            }
            inOrder(node){
                if(node != null){
                    this.inOrder(node.left);
                    this.rootArr?'':this.rootArr=[];
                    this.rootArr.push(node.show());
                    this.inOrder(node.right);
                }
            }
            //展示bst的tree结构
            showTree2Html(root){
                if(root){
                    let onlyLeft  = (root.left && !root.right)
                    let onlyRight = (!root.left && root.right)
                    let noSubTree = !root.left && !root.right
                    return `
                    <div id='rootNode' class="
                        tree
                        ${noSubTree?'no_child_node':''}
                        ${onlyLeft?'just_only_left':''}
                        ${onlyRight?'just_only_right':''}
                    ">
                        <span> <b>${root.data}</b> </span>
                        ${root.left?this.showTree2Html(root.left):''}
                        ${root.right?this.showTree2Html(root.right):''}
                    </div>
                    `                    
                }
            }
    }
    function main(){
        let BSTObj  =  new BST();
        new Array(20).fill('').forEach(element => {
            BSTObj.insert(parseInt(Math.random()*100))
        });
        let _html = document.getElementById('show')
        let _body = document.body;
        //DOMParser 实例的parseFromString方法可以用来直接将字符串转换为document 文档对象
        let _treedoc = new DOMParser().parseFromString(BSTObj.showTree2Html(BSTObj.root), 'text/html') 
        let _tree = _treedoc.getElementById('rootNode')
        _html.innerHTML = BSTObj.show().toString();
        _body.appendChild(_tree)
    }
    main();
    </script>
</body>
代码小戳
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
二叉树（生成，遍历，树形输出等等）
01-21
二叉树的生成，先序，中序，后续遍历，以及树形输出，很实用哦，这个是C语言版的
任何二叉树生成器
06-09
该生成器可以根据用户的要求生成任何用户所需要的类型的二叉树
html 二叉树模式,二叉树的HTML显示
weixin_35511255的博客
06-05 144
protectedstringbf(inti,stringcoding,stringpcoding,strings){stringc1="",c2="";if(coding=="左未注册"||coding=="右未注册"){c1="左未注册";c2="右未注册";}else{//c1="左未注册";c2="右未注册";c1=string.Format("{1}",codi...
二叉树 html模板,用 DOM 与 CSS 展示二叉树
weixin_35750483的博客
06-11 456
好久不见，我的日常更新终于来了这次讨论一点简单的算法，当然，主要还是前端的内容~本文内容较长，主要涉及如下内容：二叉树及相关算法Flexbox 布局CSS 背景图片，计数器等应用使用 SVG 做为背景图片会遇到的问题最近在讲各种与树相关的算法与题目时，为了给学生演示，总是想要看到树的结构，总是画出来又慢又丑，在控制台里展开看的话实在太麻烦，而且不够直观我就寻思能不能把树给展示在页面里。什么是二叉树...
基于HTML的高度平衡的二叉树的算法图示
qq_37398808的博客
02-07 708
算是抛转引玉吧，leetcode在线就可以算出结果，html页面也很简单，对算法最终可以有一个直观地结果。 用html来图示算法是可行的，大家可以试着画其他的算法，搭建服务器，甚至画出动画来。
在线二叉树&哈夫曼生成工具
热门推荐
heaboy的专栏
10-22 1万+
在线二叉树&哈夫曼生成工具在线二叉树生成在线哈夫曼生成链接 在线二叉树生成 必须有中序,前序和后序填写一个即可,就可以生成二叉树的另外一个序列,并可以看到右侧生成的数 在线哈夫曼生成 可以快速生成对应的哈夫曼数 格式如示例即可,并可以快速计算出带权总值 链接 http://www.easycode.top/ ...
在线二叉树与哈夫曼树生成工具(转载https://blog.csdn.net/yhtgb/article/details/120904154)
伏颜的博客
06-28 3299
在线直接生成二叉树
各种树型数据结构的在线生成网页
我秃了，也变强了。
05-11 2619
https://www.cs.usfca.edu/~galles/visualization/Algorithms.html
以网页形式展示二叉树
皮皮不调皮的博客
08-21 1071
为了检验创建出来的二叉树是否正确，可以使用如下代码将二叉树以网页形式展现出来： #define TREENODE node // 声明自定义的二叉树节点为TREENODE #include “drawtree.h” // 包含画树代码 int main() { // 以网页形式展现二叉树 draw(root); } 其中，node是自己定义的二叉树的节点的类型，root是根节点，在包含 drawtree.h 之前定义 TREENODE 这个宏为 node ，即可展示对应二叉树。 注意： 只能在linux环境
js 生成二叉树
AuraVic的博客
09-06 898
普通方法 function binaryTree() { // 定义node节点 var Node = function(key) { this.key = key; this.left = left; this.right = right } // 当前根节点 var root = null // 插入元素函数 var insert = function(value){ // 初始化新节点 var newNode = new Node(value) // 如果没有根
在html页面中画出逻辑上的二叉树
11-04
将逻辑上得二叉树在图中展示出来,将树的结构图形化展示出来
数据结构——二叉树的生成与遍历
02-18
数据结构，实现二叉树的生成与遍历的算法。包含利用先序、中序、后序遍历二叉树算法，二叉树基本操作。（注意没有左子树或右子树时用@或#作为结束符号）
leetcode格式二叉树生成工具.cpp
05-19
输入leetcode测试用例[1,2,null,3]类型字符串，返回根节点指针。判断逻辑和leetcode一致，null结点无须额外输入null子结点，并且自动舍弃无效结点，例如输入[1,null,2,null,null,3]，算法会自动舍弃结点3. ...
VC++ 二叉树遍历及二叉树生成 理解
10-25
1、对二叉树先、中、后根遍历理解 2、使用C++实现根据给出的序列生成对应的二叉树 3、MFC 演示二叉树生成过程
二叉树的生成与遍利.rar_二叉树
09-24
二叉树
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
10-17
主要介绍了JavaScript数据结构与算法之二叉树插入节点、生成二叉树,结合实例形式较为详细的分析了javascript二叉树相关概念、定义、节点插入、遍历输出等相关操作技巧,需要的朋友可以参考下
html二叉树遍历,二叉树总结—建树和4种遍历方式（递归&&非递归）
weixin_29047545的博客
06-15 153
今天总结一下二叉树，要考离散了，求不挂！二叉树最重要的就是 建立、4种遍历方式，简单应用，如何判断两颗二叉树是否相似二叉树分为 ：1、完全二叉树 2、满二叉树结构性质：1).满二叉树 高度为h ，节点数则为 2^h - 1，且叶子节点全在最下层，且叶子节点数为2^(n-1)个｛n代表二叉树层数，也叫深度｝2).n个节点的 完全二叉树 深度为 int(log2n)(以2为底n的对数)+ 1；3)....
HTML绘制二叉树,JS实现的二叉树算法完整实例
weixin_42600407的博客
07-01 326
本文实例讲述了JS实现的二叉树算法。分享给大家供大家参考，具体如下：20130328BinaryTree//今天学习了下二叉树算法，总结在这里//1全局变量 binary Tree =bt//1.1 nodefunction Node() { //bt节点this.text = ''; //节点的文本this.leftChild = null; //节点的左孩子引用...
html二叉树遍历,【LeetCode】二叉树层次遍历 （一次让人疯掉的超低级bug）
weixin_39585795的博客
06-15 94
我对递归的思想有点犯怵，递归这个东西确实须要天赋和训练。因此二叉树遍历我首先掌握的是迭代方法。html层次遍历的基本思路是，由于要从上到下，从左到右进行遍历，咱们进行碰到数据的过程和要处理的过程方向是一致的，因此最好使用队列queue数据结构：在while循环中，每处理一个数据，一次把它的左子节点(若是有的话)和右子节点(若是有的话)入队，直到队列变空。nodeLeetCode上这一题，不只要按正...
创建二叉树打印二叉树
最新发布
09-26
创建二叉树可以通过输入带空格的前序序列来建立二叉链表。打印二叉树的话，可以按照树的形态在屏幕上输出。具体的步骤如下： 1. 首先，根据读取的元素建立二叉链表。可以使用递归的方式来创建二叉树。首先读取根节点的值，并创建一个根节点。然后，递归地创建左子树和右子树，直到叶子节点。创建左子树时，将左子树的根节点设为当前节点的左孩子；创建右子树时，将右子树的根节点设为当前节点的右孩子。 2. 创建完二叉树后，可以进行先序、中序和后序遍历。先序遍历是先访问根节点，然后再先序遍历左子树，最后再先序遍历右子树。中序遍历是先中序遍历左子树，然后再访问根节点，最后再中序遍历右子树。后序遍历是先后序遍历左子树，然后再后序遍历右子树，最后再访问根节点。这三种遍历方法可以使用递归或非递归的方式实现。 3. 打印二叉树可以按照树的形态在屏幕上输出。可以使用层次遍历（也称为广度优先搜索）来实现。从根节点开始，依次按层遍历二叉树的每个节点，将节点的值输出到屏幕上。可以使用队列来辅助实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值