数据可视化——基于JavaScript和svg的二叉树

最新推荐文章于 2023-07-16 17:35:11 发布
最新推荐文章于 2023-07-16 17:35:11 发布
阅读量757 收藏 8
点赞数 2
文章标签： 可视化 二叉树 svg js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46744761/article/details/117247860
版权

仿真二叉树


通过树枝长度递减以及角度的随机变化使得二叉树看起来像一颗仿真树，用该方法绘制的树是一棵随机树，代码如下： 

<html>
    <body>
        <h2>仿真二叉树</h2>
        <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;

            var svg=document.getElementById("mysvg");
            svg.setAttribute("width",w);
            svg.setAttribute("height",h);
            w=w*0.98;
            h=h*0.98;

            var x0=w/2;
            var y0=h;
            var L=200;
            var rate=0.92;
            var a=-Math.PI/2;
            var count=11;
            function show(x0,y0,L,rate,a,count){
                var x1=x0;
                var y1=y0;
                var x2=x1+L*Math.cos(a);
                var y2=y1+L*Math.sin(a);

                var L=L*rate*(0.5+Math.random()*0.5);
                var aL=a-Math.PI/4.5*(0.5+Math.random()*0.5);
                var aR=a+Math.PI/4.5*(0.5+Math.random()*0.5);
                var lineX=document.createElement("line");
                svg.appendChild(lineX);
                lineX.outerHTML="<line x1="+x1+" y1="+y1+" x2="+x2+" y2="+y2+" stroke='green' stroke-width="+count+" />";
                if(count>0){
                    show(x2,y2,L,rate,aL,count-1);
                    show(x2,y2,L,rate,aR,count-1);
                }
            }
            show(x0,y0,L,rate,a,count);
        </script>
    </body>
</html>

在这里插入图片描述

文字二叉树


将树枝改换成文字并实现颜色的渐变效果 

<html>
    <body>
        <h2>文字二叉树</h2>
        <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;

            var svg=document.getElementById("mysvg");
            svg.setAttribute("width",w);
            svg.setAttribute("height",h);
            w=w*0.98;
            h=h*0.98;

            var str="春江潮水连海平";
            var x0=w/2;
            var y0=h;
            var L=200;
            var rate=0.6;
            var a=-Math.PI/2;
            var count=7;
            var fontsize=20;
            function show(x0,y0,L,rate,a,count){
                var fontsize=count*3;
                var L=str.length*fontsize;
                var x1=x0;
                var y1=y0;
                var x2=x1+L*Math.cos(a);
                var y2=y1+L*Math.sin(a);

                var aL=a-Math.PI/6;
                var aR=a+Math.PI/6;

                var words=document.createElement("text");
                svg.appendChild(words);
                words.outerHTML="<text x="+x1+" y="+y1+" transform='rotate("+a*180/Math.PI+","+x1+","+y1+")' fill='green' font-size="+fontsize+">"+str+"</text>";
                if(count>0){
                    show(x2,y2,L,rate,aL,count-1);
                    show(x2,y2,L,rate,aR,count-1);
                }
            }
            show(x0,y0,L,rate,a,count);
            show(x0,y0,L,rate,a,count);
            show(x0,y0,L,rate,a,count);
        </script>
    </body>
</html>

在这里插入图片描述

苹果树


在文字二叉树的基础上在顶部添加了不同颜色的“果实” 

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <h2><center>文字二叉树</center></h2>

        <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;

            var svg=document.getElementById("mysvg");
            svg.setAttribute("width",w);
            svg.setAttribute("height",h);
            w=w*0.98;
            h=h*0.98;

            var str="这是一棵文字树";
            var x0=w/2;
            var y0=h;
            var L=200;
            var rate=0.6;
            var a=-Math.PI/2;
            var count=7;
            var fontsize=20;
            function show(x0,y0,L,rate,a,count){
                var fontsize=count*3;
                var L=str.length*fontsize;
                var x1=x0;
                var y1=y0;
                var x2=x1+L*Math.cos(a);
                var y2=y1+L*Math.sin(a);

                var aL=a-Math.PI/6*(0.5+0.5*Math.random());
                var aR=a+Math.PI/6*(0.5+0.5*Math.random());

                var words=document.createElement("text");
                svg.appendChild(words);
                words.outerHTML="<text x="+x1+" y="+y1+" transform='rotate("+a*180/Math.PI+","+x1+","+y1+")' fill='rgb(0,"+(250-count*30)+",0)' font-size="+fontsize+">"+str+"</text>";
                if(count>0){
                    show(x2,y2,L,rate,aL,count-1);
                    show(x2,y2,L,rate,aR,count-1);
                    if (count==1){
                        var apple=document.createElement("circle");
                        svg.appendChild(apple);
                        apple.outerHTML="<circle cx="+x2+" cy="+y2+" r="+6*Math.random()+" fill='rgb("+(150+100*Math.random())+",0,0)'/>";
                    }
                }
            }
            show(x0,y0,L,rate,a,count);
            show(x0,y0,L,rate,a,count);
        </script>
    </body>
</html>

在这里插入图片描述

Dusk-
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于js和SVG的仿真二叉树
蛤
05-05 584
今天看到一个超美的树，（本来想在网上找代码的，结果没找到）然后就跟着书本敲了一下代码 先上图 这就是那个棵继樱花树之后迷倒我的另一棵树了 废话不多说，代码在下面 <!DOCTYPE html> <html lang="en"> <head> <title>Title</title> </head> <body&...
ZoomableListController:苹果的 iOS 天气应用列表仿用 Swift 编写
05-29
可缩放列表控制器 [！[CI状态]（ margutti / ZoomableListController.svg？style = flat）]（ margutti / ZoomableListController） 用法 要运行示例项目，请克隆存储库，然后首先从Example目录运行pod install 。 要求 安装 ZoomableListController可通过。 要安装它，只需将以下行添加到您的Podfile中： pod "ZoomableListController" 作者 daniele margutti, 执照 ZoomableListController 在 MIT 许可下可用。 有关更多信息，请参见LICENSE文件。
JavaScript篇（一）二叉树的插入 (附:可视化)
aicongchuo5501的博客
06-22 528
一、二叉树概念 二叉树（binary tree）是一颗树，其中每个节点都不能有多于两个的儿子。 字节一面，第一道就是二叉树的插入，在这里其实是对于一个二叉查找树的插入。 使二叉树成为二叉查找树的性质是，对于树中的每个节点X，它的左子树中所有项的值小于X中的项目，而它的右子树所有的项的值大于X中的项。 如下图，两颗都是二叉树，左边的树是查找树，右边的树则不是。右边的树在其项为6的节...
HTML和JavaScript绘制随机角度二叉树
Mr.Pan_学狂
11-12 365
代码如下： <!--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=
数据可视化原理与实例
m0_57979544的博客
03-21 1884
数据的采集、提取和理解是人类感知和认识世界的基本途径之一，数据可视化为人类洞察数据的内涵、理解数据蕴含的规律提供了重要的手段。从宏观角度看，可视化包括三个功能：信息记录、支持对信息的推理和分析、信息传播和协同。从奇数的可视化、勾股定理的图形化证明到著名的“鬼图”曾帮助发现霍乱流行原因、蛋白质折叠游戏、大国高层政治人物社交网络和揭示批量文本主题的词云图、大量实例表明可视化在知识发现、分析、理解和传播中扮演着重要的作用。
canvas实现一棵随机数
weixin_45377773的博客
07-16 169
首先要搞明白canvas的一些基本方法, 例如: beginPath(), lineTo(), moveTo(), fill(), arc()等。效果实现, 页面每刷新一次就会随机生成一棵新的树。文件夹中新建html和js文件,html文件中的代码。
svg画出二叉树
05-30
这方面的资料很少，例子也很少，所以资源分3分。本人在项目中，画拓扑图，引用次方法进行改进，效果不错
go语言｜数据结构：二叉树可视化（制作svg格式树形图）
汉阳Hann's Home
09-04 2808
SVG是可伸缩矢量图形 (Scalable Vector Graphics)，于2003年1月14日成为 W3C 推荐标准。SVG 用来定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 是万维网联盟的标准SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体矩形 ......
js操作svg
wh359126613的专栏
01-13 1330
1，功能 鼠标位置放大缩小、支持拖动。 通过java后台服务返回的url，然后加载到浏览器中。(谷歌)
JS-SVG关系图
11-09
某XX中想要了解客户间的交易情况，将数据图形化展现，即展现关系图。 描述如下： 1、每个客户用圆表示，客户间关系使用直线表示； 2、某客户与之相关系的客户越多，即该客户的圆半径越大，反之； 3、两客户间的交易总数越大，即直线越粗，反之； 4、鼠标放在圆上，即显示该客户的交易详情，信息包括客户ID、关联客户总数、出账总金额、入账总金额； 5、点击圆，即出账、入账交易动态动画展示； JS接口说明： function paint(data, enableShowLines, enableStrongLines); data: 客户交易数据 enableShowLines: 是否显示所有的关系，即是否显示所有直线 enableStrongLines: 当鼠标在圆上时，是否使该客户的关系直线加粗 注意： 为了熟悉JS等作为练习的，希望对新手有一定的帮助。
svg与js交互
05-18
svg与js交互,主要讲解svg与js的交互,svg与js交互,主要讲解svg与js的交互
javascript 渲染svg数据
11-22
通过该类可以渲染 加载svg数据的内容!正确的显示出来，
数据可视化-使用SVG和D3可视化浏览指标
03-02
学习如何结合使用可缩放矢量图形(SVG)和开源D3JavaScript库创建数据可视化。形状、颜色和布局可能对从业务角度理解海量数据有很大的帮助。一个示例场景演示了如何使用SVG和D3来根据社交媒体的浏览指标创建...社交...
数据可视化-canvas-svg-Echarts
08-19
数据可视化代码
基于Javascript和D3.js的疫情可视化设计源码
04-08
疫情可视化系统 - 基于Javascript和D3.js开发，包含28个文件，如JSON、CSV、JS、XML、GITIGNORE、CSS、SVG、LICENSE、IML和DS_STORE等。该系统使用D3.js完成中国疫情的可视化，包括中国地图的展示、使用brush的强...
基于JavaScript和Python的CNN可视化项目设计源码
最新发布
04-15
基于JavaScript和Python的CNN可视化项目设计源码，该项目包含89个文件，主要文件类型有21个...该项目是一个基于JavaScript和Python的CNN可视化项目设计源码，可能涉及用户界面设计、应用逻辑实现、数据存储等多个方面。
数据结构の学习（一）：可视化一棵二叉树
qq_32439305的博客
04-09 1598
学习树的时候，我们有一个最大的疑惑，就是如何可视化一颗二叉树。因为你总不可能指望永远在嵌套列表中看出一颗树出来。我们希望更直观一些，就像上面那副图一样，简单漂亮。这正是笔者在学习树开始时干的第一件事。 不幸的是，笔者的博客将不会有完整代码（示范代码除外），所有代码均已上传到码云上。如果时间和精力允许的话，强烈建议你根据思路，手动写一遍，相信你会感觉到全身毛孔舒张而不是想砸电脑的快感。 很...
数据可视化汇总（一）
一只土豆酱的博客
05-19 680
目录直方图基本语法成果展示源码分形和二叉树基本语法成果展示源码饼图和环图基本语法成果展示源码JSP连接数据库基本语法易错提示成果展示源码力导向图基本语法成果展示源码词云图基本语法成果展示源码 直方图 基本语法 成果展示 源码 分形和二叉树 基本语法 成果展示 源码 饼图和环图 基本语法 成果展示 源码 JSP连接数据库 基本语法 易错提示 成果展示 源码 力导向图 基本语法 成果展示 源码 词云图 基本语法 成果展示 源码 ...
python 数据可视化
05-23
Python有许多数据可视化工具和库，以下是其中的一些： 1. Matplotlib：Matplotlib是Python中最流行的绘图库之一，它可以用于创建高质量的图表、图形、线条、等高线图、散点图等。 2. Seaborn：Seaborn是一个基于Matplotlib的高级数据可视化库，它提供了许多内置的图表类型，如热力图、分布图、时间序列图等，并且其默认的主题和颜色调色板使得图表更加美观。 3. Plotly：Plotly是一个交互式的开源数据可视化工具，它可以创建和分享数据可视化图表、科学图形和在线交互式图形。 4. Bokeh：Bokeh是一个交互式的Python数据可视化库，它支持现代Web浏览器中的交互式图形，可以创建漂亮的、交互式的、可高度定制的图形。 5. D3.js：D3.js是一个用于数据可视化的JavaScript库，它可以帮助你使用HTML、SVG和CSS来创建动态、交互式的数据可视化。 以上是Python中常用的一些数据可视化工具和库，你可以根据自己的需求选择合适的工具和库进行数据可视化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值