想在页面上画出二叉树，并演示遍历过程

[zzw165027967]

我知道怎么遍历，也知道怎么构造，不知道怎么在页面上显示出来。~就是让随便一个人都能在页面上看出哪个是根节点，结构是怎么样的。

public class BinaryTree
    {
        private Node _head;
        private string cStr;
        public Node Head
        {
            get { return _head; }
        }
        public BinaryTree(string constructStr)
        {
            cStr = constructStr;
            _head = new Node(cStr[0]);
            Add(_head, 0);
        }
        private void Add(Node parent, int index)
        {

            int leftIndex = 2 * index + 1;
            if (leftIndex < cStr.Length)
            {
                if (cStr[leftIndex] != '#')
                {
                    parent.Left = new Node(cStr[leftIndex]);
                    Add(parent.Left, leftIndex);
                }
                else
                {
                    parent.Left = new Node("");
                    Add(parent.Left, leftIndex);
                }
            }
            int rightIndex = 2 * index + 2;
            if (rightIndex < cStr.Length)
            {
                if (cStr[rightIndex] != '#')
                {
                    parent.Right = new Node(cStr[rightIndex]);
                    Add(parent.Right, rightIndex);
                }
                else
                {
                    parent.Right = new Node("");
                    Add(parent.Right, rightIndex);
                }
            }
        }
    }

这是BinaryTree类。

public class Node
    {
        private readonly object _data;
        public object Data
        {
            get { return _data; }
        }

        public Node Left { get; set; }
        public Node Right { get; set; }

        public Node(object data)
        {
            _data = data;
        }
        public override string ToString()
        {
            return _data == null ? null : _data.ToString();
        }
    }

这是节点类

public void PreOrder(Node node, ref StringBuilder PreStr)
        {
            if (node != null)
            {
                PreStr.Append(node.ToString());
                PreOrder(node.Left, ref PreStr);
                PreOrder(node.Right, ref PreStr);
            }
        }

        public void MidOrder(Node node, ref StringBuilder MidStr)
        {
            if (node != null)
            {
                MidOrder(node.Left, ref MidStr);
                MidStr.Append(node.ToString());
                MidOrder(node.Right, ref MidStr);
            }
        }

        public void AfterOrder(Node node, ref StringBuilder AfterStr)
        {
            if (node != null)
            {
                AfterOrder(node.Left, ref AfterStr);
                AfterOrder(node.Right, ref AfterStr);
                AfterStr.Append(node.ToString());
            }
        }

这是3种遍历方法~

[wuyq11]

silverlight，页面效果
或通过VML等画图实现

[lizhibin11]

我做过一个这样的东西，不过客户端是wpf，节点关系通过每行第一个格子的缩进量来体现，比较容易画。用silverlight应该与wpf类似，建议用这个。用Javascript的话，在滚动条滑动时，遍历二叉树找到相应页再画格子什么的恐怕消耗很大。