原创.演示见： http://runjs.cn/detail/bek3ctfb http://sandbox.runjs.cn/show/bek3ctfb 动画显示数据结构：二叉查找树BinarySearchTree的生成。 左子树上的所有节点值均小于根节点值 右子树上的所有节点值
http://runjs.cn/detail/bek3ctfb
http://sandbox.runjs.cn/show/bek3ctfb
动画显示 数据结构：二叉查找树 Binary Search Tree 的生成。
左子树上的所有节点值均小于根节点值
右子树上的所有节点值均大于根节点值
左右子树也满足上述两个条件。
遍历(Traversal)，就是沿着某条搜索路线，依次对树中每个结点均做一次且仅做一次访问。
通过中序遍历, 可以输出各结点的键值为递增排序的结果
最小键值是根节点左子树的最左侧子节点的键值
最大键值是根节点右子树的最右侧子节点的键值
1. [图片] tree.png
2. [代码]动画显示（数据结构）二叉查找树的生成
<html >
<head>
<meta charset="utf-8" />
<title>二叉查找树 Binary Search Tree</title>
<script>
var x = new Array(240,145,305,40,206,375,110,305,450,380);
var y = new Array(30,90,90,167,167,167,250,250,250,330);
var k = new Array(45,12,53,10,37,90,24,61,99,98);
function drawTree(){
drawNode_Branch(45,45);
setTimeout('drawNode_Branch(45,12)',2000);
setTimeout('drawNode_Branch(12,37)',4000);
setTimeout('drawNode_Branch(45,53)',6000);
setTimeout('drawNode_Branch(12,10)',8000);
setTimeout('drawNode_Branch(37,24)',10000);
setTimeout('drawNode_Branch(53,90)',12000);
setTimeout('drawNode_Branch(90,61)',14000);
setTimeout('drawNode_Branch(90,99)',16000);
setTimeout('drawNode_Branch(99,98)',18000);
}
function drawNode_Branch(key1,key2){
var a = get_index(k, key1);
var b = get_index(k, key2);
branch(a,b);
drawNode(x[b],y[b],key2);
}
function branch(a,b){
var g = document.getElementById("can1").getContext("2d");
g.strokeStyle="brown";
g.lineWidth=5;
g.beginPath();
g.moveTo(x[a], y[a]);
g.lineTo(x[b], y[b]);
g.stroke();
}
function get_index(arr, key){
for (var i=0; i<arr.length; i++)
if (arr[i]==key) return i;
return null;
}
function drawNode(x,y,key){
var g = document.getElementById("can2").getContext("2d");
g.lineWidth=3;
g.save();
g.translate(x,y);
g.beginPath();
g.arc(0,0,25,0,2*Math.PI);
g.fillStyle="#00FFFF";
g.fill();
g.strokeStyle="green";
g.stroke();
g.font="36px ARIAL";
g.fillStyle="black";
g.fillText(key.toString(),-20,13);
g.restore();
}
function preparation(){
drawTree();
}
</script>
<style>
#can1{
z-index:1;
position:absolute;
left:0px;
top:0px;
background-color:#FF0;
}
#can2{
z-index:2;
position:absolute;
left:0px;
top:0px;
}
#words{
z-index:3;
width:500px;
position:absolute; left:0; top:300;
}
</style>
</head>
<body onLoad="preparation()">
<canvas id="can1" width="500" height="365" >
<p>Your browserdoes not support the canvas element!</p>
</canvas>
<canvas id="can2" width="500" height="365" >
<p>Your browserdoes not support the canvas element!</p>
</canvas>
<div id="words"><h2>二叉查找树 Binary Search Tree</h2>
<ol>
<li>左子树上的所有节点值均小于根节点值</li>
<li>右子树上的所有节点值均大于根节点值</li>
<li>左右子树也满足上述两个条件。</li>
<li>遍历(Traversal)，就是沿着某条搜索路线，依次对树中每个结点均做一次且仅做一次访问。</li>
<li>通过中序遍历, 可以输出各结点的键值为递增排序的结果</li>
<li>最小键值是根节点左子树的最左侧子节点的键值</li>
<li>最大键值是根节点右子树的最右侧子节点的键值</li>
</ol>
</div>
</body>
</html>