XML Volume Battle Kit (5): Tree Map
motivation:
I originally think of doing a binary tree because it is necessary to make a company structure map. The previous practices are to draw a picture directly with image software. Very nice, but every time there is a change, you need to draw a new one. On the other hand, the display of the line on the web page is quite limited. Based on dynamic generated data, the positioning is quite difficult, and it is also very common in aesthetics. After doing various attempts, decided to use XML XSL to make data operations; use VML to beautify the lines, and use JavaScript to locate objects.
material:
Tree diagram of XML volume
There are 2 files: flow2.xml and flow2.xsl
effect:
Browse here
explain:
Two-fork trees (1)
V /: * {behavior: URL (# default # VML)}
Style>
...
v: group>
These are all basic formats of VML, I will not explain it in detail.
XML is a tree structure, we need to read each data.
The XML data tree is traversed. The recursive operation is one of the advantages of XSL.
I am also the failure of traversal operations in other ways.
Decided to use XSL.
Flownode>
inextyes>
Flownode>
inextno>
Flownode>
Flowroot>
Logically is simple, the current node (1) There are two sub-nodes (2, 3) below.
It is only necessary to position nodes 2 and node 3 in the lower left of node 1 and in the lower right.
Here I use the cables of the left and right nodes to use green and red, which is convenient to display.
As we said in the recursive function of XSL, in order to see every detailed
The display step is only necessary to simulate the following code, add an Alert statement.
...
Alert ('step by step ");
...
Script>
...
xsl: template>
I have seen the slow motion above, can't let everyone know my idea.
Two-fork trees (2)
My idea is very simple:
(1) Read the information of the current node, generate a new object with VML.
Give the object to the initial value (such as Name, ID, style, etc.)
(2) Positioning the current object with script control
(3) The current node and the arrow between the father's node, the line.
(4) Continue to find the child node of the current node, and it is looped to the end.
That is, all nodes have been traversed, and the tree has been generated.
...
...
xsl: template>
xsl: template>
xsl: template>
The entire recursive process is done by Template on the top of the Template.
The first Template is when the template of each child node is matched in the current node
The back two template; followed by two template on the specific implementation
When you call the first Template, this is equivalent to a recursive function.
grammar:
To match the template of each child node in the current node, use this element
Basic Forms of Suques
Otherwise, the matching node is determined by the XPath expression in the SELECT parameter.
Set, such as
The roles of (1) and (2) are string values that return the expression given by the Select parameter.
Their search conditions are the same, so the returned value is the same.
It is only a different case, and their writing form is different.
(1)
(2) {./iprocess/text ()}
Some variables are defined here, and the node is positioned to call the operational formula based on these variables.
Root_left / Root Left distance = All leaves Allocate Width (Y * 10) All Leaves Width (Y * 50) Left Basic Value (10)
Root_top / Root on the upper margins = upper margins Basic value (10)
Objoval // Current object, is an Object
Objoval_iprocess // Current Objects The steps of the ObjParentOval // The current object's parent // is an Object
ObjParentOval_iprocess // Current Objects Fialtures steps
ObjParent_name // The name of the current object parent node
LEAF_LEFT // The left left leaf number in all child nodes of the current object
LEAF_RIGHT / / The number of left leaves in all child nodes of the current object
Leaf_sum // The number of leaves in all child nodes of the current object
Leaves: means that there is no child node of the current node
Node positioning formula:
(1) The current node is root node
// Root position
Sobjoval.Style.Left = parseint; Root_left;
Sobjoval.Style.top = parseint (root_top);
// PARSEINT () function The role of the function is to get a value, if not nan
The effect of // isnan () function is to determine whether the Parseint acquired is an integer
(2) The current node is the left subpode of the parent node
1) The condition for judging is: the name of the current object parent node = 'INEXTYES'
...
2) If there is a right sub-leaf, the formula is:
The current node's Left = parent node's Left - the total width of the right sub-leaves of the current node - the width of the current node
3) If there is no right side leaves, there is a left sub-leaf, the formula is:
The current node Left = parent node's Left - the total width of the left sub-leaf of the current node
4) If the current node itself is the leaves, the formula is:
The current node Left = Left of the parent node - the width of the current node
...
(3) The current node is the right subode of the parent node
1) The condition for judging is: the name of the current object parent node = 'inextno'
...
2) If there is a left sub-leaf, the formula is:
The current node's left = parent node's Left current node's total width of the left sub-leaves the width of the current node
3) If there is no left sub-leaf, but there is a left left leaf, the formula is:
The current node's left = parent node's Left current node's total width of the left
4) If the current node itself is the leaves, the formula is:
The current node's Left = the parent's Left current node width
...
(2) and (3) The formulas get the LEFT of the current node, we also need to get the current node TOP
Very simple formula: TOP = TOP offset of parent nodes (80)
Two-fork trees (3)
Connection line positioning ideas:
(1) Locate the location of the current node and the parent node
(2) Judging the current node is the left subpode of the parent node, or the right sub-node
(3) Painted lines
Some variables are defined here.
Objoval // Current node is an Object
Objparent 4 // The parent of the current object is an Object
Objline // Current lines are an Object
Line positioning formula:
From = "x1, y1" to = "x2, y2" is a way to locate the line in VML
The current node is the left subpode of the parent node, the formula is:
From = Parent Node Left Offset (15), Parent Node TOP Offeter (32) TO = LEFT Offset (30) of the Parent Node (30), Parent Node TOP - Offex (2)
The current node is the right sub-node of the parent node, and the formula is:
From = LEFT offset (35) of the parent node (35), the top offset of the parent node (32)
To = LEFT offset (20) of the parent node (20), the TOP-offset of the parent node (2)
I can think of it too much.
If it is just a simple to make a company structure map, it will be more simple.
Here is the idea of Celegia, I am also inserting a little in his basis.
First calculate the number of the lowermost node, draw the width,
The upper layer node position should then be calculated based on the slave relationship of the node.
Each level of node is sorted first according to the dependence
First set "basic value" = node should be removed
Each LEFT value of the node containing the child node is equal to half of the width of the node it owns.
Laterness:
I don't know why, the network has never been good. The time of the disconnection is more than the online time.
So simplifying the code, in fact, there are many features to be perfect, such as:
Need to right or right
The right-click menu contains new nodes, modify the node name, change the association relationship, etc.
Right click on this node on each node.
explain:
1) Flow2.xml is a data file, I believe that there will be no problem.
2) Flow2.xsl is a format file, and there are several places to pay attention.
(1) Script:
(1)
(2) {./iprocess/text ()}
The roles of (1) and (2) are string values that return the expression given by the Select parameter.
Their search conditions are the same, so the returned value is the same.
It is only a different case, and their writing form is different.
For example, we want to generate the following code
We assume name "name", the parameter value is the value of the child's node book below the current node in XML data
The first way is to add an attribute name, plus the parameter value.
content
div>
The second way is to directly add an attribute name and parameter value.
The role is: just written his text value, and
It is displayed on his text value and the content of all his child nodes.
Everyone can test, output a child node, a no child node
Look at whether the result of the display is the same.
(2) Need to pay attention:
IE5 does not support
Use
Name space
XMLns: XSL = "http://www.w3.org/tr/wd-xsl"
XML Version = "1.0" encoding = "GB2312"?>
In addition to say:
In most XML textbooks, there are very few encoding = "GB2312" in the code displayed in most XML textbooks.
Therefore, when we used Chinese in XML, it will report an error because of the reason is not written.
postscript:
What is said here is a kind of thinking. If you touch the category, you can naturally send a field.