在html页面中画出逻辑上的二叉树（资源下载）
程序员文章站
2022-04-22 15:02:03
...
这是为在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>后记
突然翻CSND发现很久之前上传的东西最近还有人下载。看到评论区有人下载后才发现不是想要的东西，为了避免这种问题所以就写了这篇文章。
上一篇： 为什么V8引擎这么快？
下一篇： Web前端学习记录(十八)