Javascript递归绘制二叉树

最新推荐文章于 2023-02-02 14:17:55 发布
最新推荐文章于 2023-02-02 14:17:55 发布
阅读量1.1k 收藏 6
点赞数
分类专栏： web前端设计框架 文章标签： JavaScript svg 绘制二叉树图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lawliet_Wang/article/details/88372773
版权

 

<html>
    <head>
        <title>标准二叉树</title>
    </head>
    <body>
<!--        svg元素-->
        <svg id ="mySvg" width = 800 height = 600></svg>
        
        <script>
            //获取屏幕宽度
            var w = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
            
            //获取屏幕高度
            var h = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
            
            //设置变量mysvg获取svg元素
            var mysvg = document.getElementById("mySvg");
            
            //修改SVG的宽度
            mysvg.setAttribute("width",w*0.9);
            
            //修改SVG的高度
            mysvg.setAttribute("height",h*0.9);
       
            //起始长度
            var length = 200;
            
            //衰减系数
            var rate = 0.6;
            
            //第一截线段的起点为x0为屏幕一般，y0为屏幕底端
            var x0 = w/2;
            var y0 = h;
            
            //迭代次数
            var count = 7;
            
            //我没搞懂iter的作用是什么
            var iter = 0;
最低0.47元/天 解锁文章
Lawlirt
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript 树
06-29
- JavaScript中可以使用递归实现这些遍历方法。 3. **添加和删除节点**： - 添加节点通常涉及到在特定位置插入新的TreeNode，这可能需要递归地遍历到合适的位置。 - 删除节点则要考虑其是否有子节点，无子节点的...
HTML和JavaScript绘制标准二叉树
Mr.Pan_学狂
11-12 601
今天又是美好的一天，我又收获了新的东西。说实话用HTML和JavaScript作可视化确实不太理想，甚至不如pyecharts来的实在，不过作为一种了解也是不错的选择。 绘制标准二叉树 代码，如下： <!--Author:Mr.Pan_学狂--> <!--finish time:2020/11/12--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl
HTML和JavaScript绘制仿真二叉树
Mr.Pan_学狂
11-12 367
觉得用HTML和JavaScript作图效果还不错，尝试一波顺便跟大家分享一下。 代码如下： <!DOCTYPE html> <!--Author:Mr.Pan_学狂--> <!--finish_time:2020/11/12--> <html> <head> <meta charset="utf-8"> <title>仿真二叉树</title> </head> <body>
HTML和JavaScript绘制随机角度二叉树
Mr.Pan_学狂
11-12 375
代码如下： <!--Author:Mr.Pan_学狂--> <!--finish_time:2020/11/12--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>分叉随机二叉树</title> </head> <body> <svg id="mySVG" width=800 height=
javaScript 二叉树 若干算法题分析（上
hl199626的博客
06-16 176
链、表、树、图……树在算法领域，可谓独霸一方，与之相关的问题千奇百怪。二叉树又是其中的典范，能延伸到 堆、AVL树、SB树、红黑树等等结构。 走进这个世界，慢慢了解，你会收获到很多。本文先来一些简单的算法题，带你了解二叉树。二叉树前序遍历（先序遍历） 给你二叉树的根节点 root ，返回它节点值的 前序 遍历。数据范围：二叉树的节点数量满足0≤ n ≤100 ，二叉树节点的值满足1≤ val ≤100 ，树的各节点的值各不相同思路： 根据递归的时机，可以很轻松知道 先序中序后序的切入点。 求二叉树的层序
js 生成二叉树
AuraVic的博客
09-06 940
普通方法 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) // 如果没有根
生成二叉树
big_gg的博客
05-15 762
树结点构造函数 const TreeNode = function (val, left, right) { this.val = (val === undefined ? 0 : val); this.left = (left === undefined ? null : left); this.right = (right === undefined ? null : right); } 将有序数组转化为二叉搜索树 思路：即递归思路，递归函数就是重复要做的事，要有出口(终止行为
二叉树练习题及答案解析
m0_52322019的博客
11-18 6396
二叉树练习一、选择题1. 某二叉树共有 399 个结点，其中有 199 个度为 2 的结点，则该二叉树中的叶子结点数为（ ）2.在具有 2n 个结点的完全二叉树中，叶子结点个数为（ ）3.一棵完全二叉树的节点数位为531个，那么这棵树的高度为（ ）4.一个具有767个节点的完全二叉树，其叶子节点个数为（）5. 某完全二叉树按层次输出（同一层从左到右）的序列为 ABCDEFGH 。该完全二叉树的前序序列为()6. 二叉树的先序遍历和中序遍历如下：先序遍历：EFHIGJK;中序遍历：HFIEJKG.则二叉树根结
二叉树图形输出 php,PHP实现从上往下打印二叉树的方法
weixin_39612228的博客
03-18 226
PHP实现从上往下打印二叉树的方法本文实例讲述了PHP实现从上往下打印二叉树的方法。分享给大家供大家参考，具体如下：问题从上往下打印出二叉树的每个节点，同层节点从左至右打印。解决思路每层树从左到右打印，所以需要将节点的左右子树存起来，因为先进先出，所以用队列。实现代码/*class TreeNode{var $val;var $left = NULL;var $right = NULL;funct...
js实现二叉树
ssjjrr的博客
02-02 534
js实现二叉树
Binary_Tree_Visualizer
03-28
2. **树的构建**：接着，我们可以通过递归或迭代的方式插入节点，构建二叉树。例如，插入操作可以这样实现： ```javascript function insert(node, value) { if (node === null) { return new Node(value); } if...
flash开发二叉树也页面中显示
09-04
// 递归绘制左子树 drawTree(node.leftChild, x - scale * 20, y - scale * 10, scale * 0.9); // 递归绘制右子树 drawTree(node.rightChild, x + scale * 20, y - scale * 10, scale * 0.9); } } function ...
算法
03-02
JavaScript支持while、for等循环结构以及递归函数，例如阶乘计算、斐波那契序列等可以通过递归来实现。 4. **图论与树算法**：在JavaScript中，可以使用邻接矩阵或邻接表来表示图，进行深度优先搜索(DFS)和广度优先...
D3思维导图案例+二叉树数据转json数组
09-12
在IT领域，D3.js（Data-Driven Documents）是一个强大的JavaScript库，用于创建交互式的、基于数据的可视化。本案例聚焦于如何将服务端提供的二叉树数据结构转化为D3.js能够理解的JSON数组格式，以便实现思维导图的...
基于Springboot和Vue的在线视频教育平台源码 在线视频教育平台代码（高分毕设项目）
08-03
在线视频教育平台源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
MATLAB实现的生成对抗网络AAE-内含数据集和结果文件.zip
08-03
MATLAB实现的生成对抗网络AAE-内含数据集和结果文件.zip
java毕业作品-VB.NET构建跨平台聊天通信软件(源代码+论文+开题报告+答辩PPT)
最新发布
08-03
java毕业作品_VB.NET构建跨平台聊天通信软件(源代码+论文+开题报告+答辩PPT)
基于matlab的Mask-RCNN网络来执行80个实例分割.zip
08-03
基于matlab的Mask-RCNN网络来执行80个实例分割.zip
递归画二叉树
05-31
好的，我可以为您演示递归画二叉树的方法。首先，我们需要确定二叉树的深度和分支角度，可以定义一个函数来实现这个功能。接下来，我们可以使用递归方法来绘制二叉树。 以下是一个Python实现的例子： ```python import turtle def draw_tree(branch_len, angle, t): if branch_len > 5: t.forward(branch_len) t.right(angle) draw_tree(branch_len-15, angle, t) t.left(angle*2) draw_tree(branch_len-15, angle, t) t.right(angle) t.backward(branch_len) def main(): t = turtle.Turtle() my_win = turtle.Screen() t.left(90) t.up() t.backward(100) t.down() t.color("green") draw_tree(75, 30, t) my_win.exitonclick() main() ``` 在这个例子中，我们定义了一个 `draw_tree` 函数，它使用递归方式来绘制二叉树。函数接受三个参数：`branch_len` 表示当前分支的长度，`angle` 表示分支的角度，`t` 表示我们使用的海龟对象。 函数首先判断当前分支的长度是否大于 5，如果是，就按照一定的角度向前移动一定距离，然后再递归调用 `draw_tree` 函数来绘制左右子树。绘制完左右子树后，海龟对象再向右转回原来的角度，退回到原来的位置，然后再向后退回原来的长度，以便绘制下一个分支。 在 `main` 函数中，我们创建了一个海龟对象 `t`，然后设置海龟的初始位置和颜色，最后调用 `draw_tree` 函数来绘制二叉树。 您可以将上面的例子复制到 Python 解释器中执行，或者保存到一个文件中运行。希望这个例子能够帮助您理解如何使用递归绘制二叉树。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值