Practical tips for XML volumes (5): structure tree

I first thought of Binary Tree because a company structure chart was needed. In the past, image software was used to draw an image. It looks nice, but every time there is a change, you need to redraw a new one. On the other hand, the display and layout of lines on the web page are quite limited. It is quite difficult to layout and locate dynamically generated data, and it is also unsatisfactory in appearance. After a variety of attempts, I decided to use XML + XSL for data operations; I used VML to beautify the lines and used JAVASCRIPT to locate the objects. Motivation:
I first thought of Binary Tree because a company structure chart was needed. In the past, image software was used to draw an image. It looks nice, but every time there is a change, you need to redraw a new one. On the other hand, the display and layout of lines on the web page are quite limited. It is quite difficult to layout and locate dynamically generated data, and it is also unsatisfactory in appearance. After a variety of attempts, I decided to use XML + XSL for data operations; I used VML to beautify the lines and used JAVASCRIPT to locate the objects.

Materials:
Structure tree of XML volumes
There are two files: flow2.xml and flow2.xsl.
Effect:
Browse here
Explanation:
Binary Tree ideas (1)

 
  …
 

These are the basic VML formats. I will not explain them in detail.

XML is a tree structure. we need
The XML data tree is traversed. Recursive operations are one of the advantages of XSL.
I am not doing this until I fail to use multiple other methods.
Decide to use XSL.

 
  
   
Binary tree-structure diagram
  Sailflying
  
   
Sailflying@163.net
  
  
   
    
1
   
   
    
First node
   
   
    
     
      
2
      
     
      
Second node
     
     
      
...
      
     
      
...
      
    
    
   
    
     
      
3
      
     
      
Third node
     
     
      
...
      
     
      
...
      
    
    
  
 

Logically, the current node (1) has two subnodes (2, 3 ).
You only need to locate node 2 and Node 3 in the lower left and lower right of node 1.
Here, I used green and red lines for the left and right nodes to facilitate display.

We have mentioned the recurrence function of XSL before, so that we can see every detailed
Show steps, just add an alert statement following the following code.

 
  
...