Practical tips for XML volumes (5): structure tree

At first, I remembered that binary tree was created because a company structure was required. 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 of lines on the web page

At first, I remembered that binary tree was created because a company structure was required. 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. The layout and positioning based on the dynamic natural data are quite difficult, and they are also elegant. 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.

Explanation:

Binary Tree ideas (1)

Reference content is as follows:



...

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

XML is a tree structure. to read each data, we need to traverse the XML data tree. The return operation is one of the advantages of XSL. I decided to apply XSL only when I failed to perform the traversal operation using other methods.

Reference content is as follows:

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, the connection lines of the left and right nodes are distinguished in green and red to facilitate display.

As we mentioned above, we have discussed the progressive return function of XSL. to better understand each specific display step, just add an alert statement following the code below.

Reference content is as follows:

...