在html页面中画出逻辑上的二叉树（资源下载）

最新推荐文章于 2021-08-31 10:58:14 发布

jidebingfeng

最新推荐文章于 2021-08-31 10:58:14 发布

阅读量2.3k

点赞数 1

文章标签： html 二叉树 javascript

本文链接：https://blog.csdn.net/jidebingfeng/article/details/77986872

版权

这是为在html页面中画出逻辑上的二叉树写的现在说明。
本来想把下载积分修改为0，但是不知道怎么修改，所以把代码和运行效果贴出来了。

运行效果

这里写图片描述

功能说明

将逻辑上的二叉树在图中展示出来

代码

大学时候写的代码，那个时候还没有学过JavaScript，所以不要纠结我的代码好坏。内容和资源中完全一样，没有修改过。

<html>
    <head>
        <style>
            #tip{
                width:200px;
                height:120px;
                background:#ccc;
                border:1px solid black;
                position:absolute;
                display:none;
            }
        </style>
        <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
    </head>
    <body>
        <svg id="mysvg" version="1.1" height="800" width="100%"/> 


        <script type="text/javascript">
            //global var
            var rowwidth=new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);
            var rowth=1;
            var exceptionlocation_={avagexindex:0,childrenumbers:0};
            //end global var
            function node(parentnode,text_)
            {
                this.parentnode=parentnode;
                this.leftchildren=null;
                this.rightbrother=null;
                this.text_=text_;
                this.location_x=0;
                this.locactiony=0;
            }

            function location_(node)
            {
                if(node!=null)
                {
                    node.location_x=rowwidth[rowth];
                    node.location_y=rowth;
                    rowwidth[rowth]+=70;
                    if(node.leftchildren!=null)
                    {
                        rowth++;
                        location_(node.leftchildren);
                        rowth--;
                        if(exceptionlocation_.avagexindex>=node.location_x)
                        {
                            rowwidth[rowth]+=(exceptionlocation_.avagexindex-node.location_x);
                            node.location_x=exceptionlocation_.avagexindex;
                        }
                        else
                        {
                            var _offset=node.location_x-exceptionlocation_.avagexindex;
                            rowwidth[rowth]+=_offset;
                            movechildrennodes(node.leftchildren,_offset,rowth);
                        }
                    }
                    else
                    {
                    }
                    if(node.rightbrother!=null)
                    {
                        location_(node.rightbrother);
                        var avagexindex=exceptionlocation_.avagexindex;
                        var childrenumbers=exceptionlocation_.childrenumbers;
                        exceptionlocation_.avagexindex=(avagexindex*childrenumbers+node.location_x)/(childrenumbers+1);
                        exceptionlocation_.childrenumbers++;
                    }
                    else
                    {
                        exceptionlocation_.avagexindex=node.location_x;
                        exceptionlocation_.childrenumbers=1;
                    }
                }
            }

            function movechildrennodes(node,_offset,rowthtmp)
            {
                if(node!=null)
                {
                    node.location_x+=_offset;
                    if(node.leftchildren!=null)
                    {
                        rowthtmp++;
                        rowwidth[rowthtmp]+=_offset;
                        movechildrennodes(node.leftchildren,_offset,rowthtmp);
                        rowthtmp--;
                    }
                    if(node.rightbrother!=null)
                    {
                        movechildrennodes(node.rightbrother,_offset,rowthtmp);
                    }
                }
            }

            function writehtml(rowthtmp,node)
            {
                if(node!=null)
                {
                    drawrect(node.location_x,(rowthtmp-1)*50,node.text_);
                    if(node.parentnode!=null)
                    {
                        drawline(node.location_x,(rowthtmp-1)*50,node.parentnode.location_x,(rowthtmp-2)*50);
                    }
                }
                if(node.leftchildren!=null)
                {
                    rowthtmp++;
                    writehtml(rowthtmp,node.leftchildren);
                    rowthtmp--;
                }
                if(node.rightbrother!=null)
                {
                    writehtml(rowthtmp,node.rightbrother);
                }
            }

            var svg = document.getElementById("mysvg");
            function drawrect(x,y,name)
            {
                var rect=document.createElementNS("http://www.w3.org/2000/svg", "rect");
                rect.setAttribute("x", x);
                rect.setAttribute("y", y);
                rect.setAttribute("width",  60);
                rect.setAttribute("height",   35);
                rect.setAttribute("style", "fill: green");
                rect.setAttribute("onmouseover", "show(evt, '" + name +","+x+","+y+"')");
                rect.setAttribute("onmouseout", "hide()");
                svg.appendChild(rect);
            }
            //alert("ok");
            //drawrect(0,0,"name");
            function drawline(x,y,px,py)
            {
                var line=document.createElementNS("http://www.w3.org/2000/svg", "line");
                line.setAttribute("x1", x+30);
                line.setAttribute("y1", y);
                line.setAttribute("x2", px+30);
                line.setAttribute("y2", py+35);
                line.setAttribute("stroke-width",2);
                line.setAttribute("style", "stroke:rgb(99,99,99);stroke-width:2");
                svg.appendChild(line);
            }

            //drawline(100,100,20,20);
            function show(evt, name)
            {
                clientX = evt.clientX + 5 + "px";
                clientY = evt.clientY + 5 + "px";
                $("#tip").css({left:clientX,top:clientY}).html(name).show();
            }
            function hide(name)
            {
                $("#tip").hide();
            }


            var nodes=new node(null,"node1");

            var node1_1=new node(nodes,"node1.1");
            nodes.leftchildren=node1_1;

            var node1_2=new node(nodes,"node1_2");
            node1_1.rightbrother=node1_2;

            var node1_3=new node(nodes,"node1_3");
            node1_2.rightbrother=node1_3;

            var node131=new node(node1_3,"nodel131");
            node1_3.leftchildren=node131;

            var node132=new node(node1_3,"node132");
            node131.rightbrother=node132;

            var node133=new node(node1_3,"node133");
            node132.rightbrother=node133;

            var node1331=new node(node133,"node1331");
            node133.leftchildren=node1331;

            var a1=new node (node1331,"a1");
            node1331.leftchildren=a1;

            var a2=new node(a1,"a1");
            a1.leftchildren=a2;

            var a3=new node(a2,"a3");
            a2.leftchildren=a3;

            var a4=new node(a3,"a4");
            a3.leftchildren=a4;

            var b0=new node(a4,"b");
            a4.leftchildren=b0;

            var b1=new node(b0,"b1");
            b0.leftchildren=b1;

            var b2=new node(b0,"b1");
            b1.rightbrother=b2;

            var b3=new node(b0,"b1");
            b2.rightbrother=b3;

            var b4=new node(b0,"b1");
            b3.rightbrother=b4;

            var b5=new node(b0,"b1");
            b4.rightbrother=b5;

            var b6=new node(b0,"b1");
            b5.rightbrother=b6;

            var b7=new node(b0,"b1");
            b6.rightbrother=b7;

            var b8=new node(b0,"b1");
            b7.rightbrother=b8;

            var b9=new node(b0,"b1");
            b8.rightbrother=b9;

            
            var node1_1_1=new node(node1_1,"node1_1_1");
            node1_1.leftchildren=node1_1_1;

            var node112=new node(node1_1,"node112");
            node1_1_1.rightbrother=node112;

            var node1111=new node(node1_1_1,"node1111");
            node1_1_1.leftchildren=node1111;

            var node11111=new node(node1111,"node11111");
            node1111.leftchildren=node11111;            

            var node111111=new node(node11111,"node111111");
            node11111.leftchildren=node111111;

            var node11112=new node(node1111,"node112");
            node11111.rightbrother=node11112;

            var node11113=new node(node1111,"node112");
            node11112.rightbrother=node11113;

            var node11114=new node(node1111,"node112");
            node11113.rightbrother=node11114;

            var node11115=new node(node1111,"node112");
            node11114.rightbrother=node11115;
            location_(nodes);
            writehtml(1,nodes);

        </script>

        <div id="tip"></div>
    </body>
</html>