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)
<HTML xmlns: V = "urn: Schemas-Microsoft-com: VML">
<Style>
V \: * {behavior: URL (# default # VML )}
</Style>
<V: Group ID = "group1" name = "group1" coordsize = "100,100">
...
</V: group>
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.
<Flowroot>
<Vctitle> Binary Tree-structure chart </vctitle>
<Author> sailflying </author>
<Email> sailflying@163.net </Email>
<Flownode>
<Iprocess> 1 </iprocess>
<Vccourse> first node </vccourse>
<Inextyes>
<Flownode>
<Iprocess> 2 </iprocess>
<Vccourse> second node </vccourse>
<Inextyes>... </Inextyes>
<Inextno>... </Inextno>
</Flownode>
</Inextyes>
<Inextno>
<Flownode>
<Iprocess> 3 </iprocess>
<Vccourse> third node </vccourse>
<Inextyes>... </Inextyes>
<Inextno>... </Inextno>
</Flownode>
</Inextno>
</Flownode>
</Flowroot>
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 follow the steps belowCodeAdd an alert statement.
<XSL: template match = "flownode">
...
<Script language = "javascript1.2">
...
Alert ('show gradually ');
...
</SCRIPT>
...
</XSL: Template>
After reading the slow motion above, can you tell me my thoughts.
Binary Tree ideas (2)
My idea is simple:
(1) read data from the current node and use VML to generate a new object.
Assign an initial value to an object (such as name, ID, and style)
(2) Use script control to locate the current object
(3) add an arrow and line between the current node and its father's day.
(4) continue to find the subnode of the current node and locate it until the end of the loop.
That is, the tree has been generated after all nodes are traversed.
<XSL: template match = "flownode">
...
<XSL: Apply-templates/>
...
</XSL: Template>
<XSL: template match = "inextyes">
<XSL: Apply-templates select = "./flownode"/>
</XSL: Template>
<XSL: template match = "inextno">
<XSL: Apply-templates select = "./flownode"/>
</XSL: Template>
The entire recursive process is completed by the preceding three modules (templates.
When the first template matches the template of each subnode in the current node
Two templates are called, and the other two templates are executed
The first template is called, which is equivalent to a recursive function.
Syntax:
To match the template of each subnode in the current node in sequence, use
<XSL: Apply-templates/>.
Otherwise, the matching node is determined by the XPath expression value in the select parameter.
Set, as shown in <XSL: Apply-templates select = "./flownode"/>
(1) and (2) Both return the string value of the expression given by the Select parameter.
Their search conditions are the same, so the returned values are the same.
They only use different occasions, and their writing forms are also different.
(1) <XSL: value-of select = "./iprocess/text ()"/>
(2) {./iprocess/text ()}
Some variables are defined here. The node is located based on these variables to call the calculation formula.
Root_left // left margin of the root = distribution width of all leaves (y * 10) + width of all leaves (y * 50) + basic left margin value (10)
Root_top // root top margin = Top margin basic value (10)
Objoval // current object, which is an object
Objoval_iprocess // step value of the current object
Objparentoval // The parent node of the current object, which is an object
Objparentoval_iprocess // step value of the parent node of the current object
Objparent_name // name of the parent node of the current object
Leaf_left // Number of left leaves in all child nodes of the current object
Leaf_right // number of right leaves in all subnodes of the current object
Leaf_sum // number of leaves in all child nodes of the current object
Leaf: indicates that the current node does not have any subnodes.
Node locating formula:
(1) the current node is the root node.
// Root position
Sobjoval. style. Left = parseint (root_left );
Sobjoval. style. Top = parseint (root_top );
// The parseint () function is used to take an integer. If not, it is Nan.
// The isnan () function is used to determine whether the obtained parseint is an integer.
(2) the current node is the child node on the left of the parent node
1) the condition is: the name of the parent node of the current object is 'inttyes'
...
2) If the right leaf exists, the formula is:
Left of the current node = left of the parent node-total leaf width on the right of the current node-width of the current node
3) if there is no child leaf on the right but there is a child leaf on the left, the formula is:
Left of the current node = left of the parent node-total width of the left child leaf of the current node
4) if the current node is a leaf, the formula is:
Left of the current node = left of the parent node-width of the current node
...
(3) the current node is the child node on the right of the parent node
1) the condition for determination is: the name of the parent node of the current object = 'extno'
...
2) If the left leaf exists, the formula is:
Left of the current node = left of the parent node + total width of the left child leaf of the current node + width of the current node
3) if the left leaf does not exist but the right leaf exists, the formula is:
Left of the current node = left of the parent node + total width of the child leaves on the right of the current node
4) if the current node is a leaf, the formula is:
Left of the current node = left of the parent node + width of the current node
...
The formulas (2) and (3) Both obtain the left of the current node. We also need to obtain the top of the current node.
Simple formula: Top of the current node = Top + offset of the parent node (80)
Binary Tree ideas (3)
How to locate connection lines:
(1) locate the current node and its parent node
(2) Determine whether the current node is a child node on the left of the parent node or a child node on the right.
(3) draw lines
Some variables are defined here.
Objoval // current node, which is an object
Objparentoval // The parent node of the current object, which is an object
Objline // The current line, which is an object
Line positioning formula:
From = "X1, Y1" to = "X2, Y2" is the way to locate lines in VML.
If the current node is a child node on the left of the parent node, the formula is:
From = left + offset of the parent node (15), top + offset of the parent node (32)
To = left + offset of the parent node (30), top-offset of the parent node (2)
If the current node is a child node on the right of the parent node, the formula is:
From = left + offset of the parent node (35), top + offset of the parent node (32)
To = left + offset of the parent node (20), top-offset of the parent node (2)
That's all I can think.
It would be much simpler to simply create a company chart.
The following is the idea of saeyang. I am also exploring it on his basis.
Calculate the number of bottom-layer nodes to obtain the width,
Then, the upper-layer node location should be calculated based on the node's subordination and recursive.
Nodes at each layer must be sorted first by subordination.
First, set "Basic Value" = the offset to the right of the node
The left value of each node that contains a subnode is equal to half the width of the node it owns plus the basic value.
After that:
Recently, I do not know why the network has been poor. The disconnection time is longer than the online time.
Therefore, the Code is not simplified. In fact, there are many functions to be improved, such:
Right-click the menu
Right-click a node, including creating a node, modifying the node name, and changing the association.
Right-click on each node to open the context menu of the node.
Explanation:
1) flow2.xml is a data file. I believe there will be no problem.
2) flow2.xsl is a format file. Pay attention to it in a few places.
(1) In the script:
(1) <XSL: value-of select = "./iprocess/text ()"/>;
(2) {./iprocess/text ()}
(1) and (2) Both return the string value of the expression given by the Select parameter.
Their search conditions are the same, so the returned values are the same.
They only use different occasions, and their writing forms are also different.
<XSL: Apply-templates select = "team" Order-by = "blue_id"/>
For example, we want to generate the following code:
<Div name = "parameter value"> content </div>
Assume that the name is "name" and the parameter value is the sub-node book value under the current node in XML data.
The first method is to add the attribute name and parameter value first.
<Div>
<XSL: attribute name = "name">
<XSL: value-of select = "./book/text ()"/> </XSL: attribute>
Content
</Div>
The second method is to directly add attribute names and parameter values.
<Div name = "{./book/text ()}"> content </div>
For specific use, you can refer to the example in the code I wrote.
XSL is in the standard of the formal xmlns: XSL = "http://www.w3.org/1999/XSL/Transform"
<XSL: value-of select = "./book/text ()"/>
The function is to write the text value, and
<XSL: value-of select = "./book"/>
Is to display his text value and the content of all his subnodes.
You can try to output a sub-node with no sub-node
Check whether the displayed results are the same.
(2) Note:
Ie5 does not support <tag ATT = "{XPath}">
To use
<Tag> <XSL: attribute name = "ATT"> <XSL: value-of select = "XPath"> </XSL: attribute>
Namespace to use
Xmlns: XSL = "http://www.w3.org/TR/WD-xsl"
<? XML version = "1.0" encoding = "gb2312"?>
Another point:
The code displayed in most XML textbooks rarely includes encoding = "gb2312 ",
Therefore, when we use Chinese in XML, an error is reported because this statement is not written.
Postscript:
Here is an idea. If it is accessible, it will naturally be useful.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
