Motivation:
The first time I thought of making a binary tree was because I needed to make a company structure chart. The previous approach was to draw a picture directly using graphics software. It looks great, but you need to paint a new one every time there are changes. On the other hand, the display and layout of lines on web pages are quite limited. Typesetting and positioning based on dynamically generated data are very difficult, and the aesthetics are not satisfactory. After making various attempts, I decided to use XML+XSL for data operations; use VML to beautify lines, and use JAVASCRIPT to position objects.
Materials:
XML volume tree diagram
There are 2 files: flow2.xml and flow2.xsl
Effect:
Browse here
Explanation:
Binary tree idea (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 formats of VML , I won’t explain it in detail.
XML is a tree structure. To read each data, we need to traverse this
XML data tree. Recursive operations are one of the advantages of XSL.
I also decided to use XSL after using various other methods to perform traversal operations and failed.
<FlowRoot> <vcTitle>二叉树--结构图</vcTitle> <Author>Sailflying</Author> <Email>sailflying@163.net</Email> <FlowNode> <iProcess>1</iProcess> <vcCourse>第一个节点</vcCourse> <iNextYes> <FlowNode> <iProcess>2</iProcess> <vcCourse>第二个节点</vcCourse> <iNextYes>…</iNextYes> <iNextNo>…</iNextNo> </FlowNode> </iNextYes> <iNextNo> <FlowNode> <iProcess>3</iProcess> <vcCourse>第三个节点</vcCourse> <iNextYes>…</iNextYes> <iNextNo>…</iNextNo> </FlowNode> </iNextNo> </FlowNode> </FlowRoot>
The logic is very simple, there are two child nodes (2, 3) under the current node (1).
Just position node 2 and node 3 at the lower left and lower right of node 1.
Here I use green and red for the connecting lines of the left and right nodes respectively for easy display.
We talked about the recursive function of XSL earlier. In order to see each detailed
display step more clearly, you only need to imitate the following code and add an alert statement.
<xsl:template match="FlowNode">…<SCRIPT language="JavaScript1.2">…alert('逐步显示');…</SCRIPT>…</xsl:template>
Binary tree idea (2)
My idea is very simple:
(1) Read the data of the current node and use VML to generate a new object.
Assign initial values to the object (such as name, id, style, etc.)
(2) Use script control to position the current object
(3) Add arrows and lines between the current node and its parent node.
(4) Continue to find the child nodes of the current node and loop until the end.
That is, all nodes have been traversed and the tree has been generated.
<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 first template
calls the following two templates when matching the template of each sub-node in the current node; and the latter two templates call the first template during specific execution
, which is equivalent to a recursive function.
Otherwise, the matching node is determined by the value of the XPath expression in the select parameter, such as
Their search conditions are the same, so the returned values are also the same.
It’s just that their writing forms are different depending on the occasions they are used.
(1)
Some variables and nodes are defined here The positioning is based on these variables to call the calculation formula.
root_left //The left margin of the root = the allocated width of all leaves (y*10) + the width of all leaves (y*50) + the basic value of the left margin (10)
root_top //The top margin of the root = the basic top margin Value (10)
objOval_iProcess //The step value of the current object
objParentOval //The parent node of the current object is an object
objParentOval_iProcess //The step value of the current object's parent node
objParent_name / /The name of the parent node of the current object
Leaf_left //The number of left leaves in all child nodes of the current object
Leaf_right //The number of right leaves in all child nodes of the current object
Leaf_sum //The number of leaves in all child nodes of the current object
Leaf: It means that the current node has no child nodes
The positioning formula of the node:
(1) The current node is the root node
//根的位置 SobjOval.style.left=parseInt(root_left); SobjOval.style.top=parseInt(root_top); //parseInt() 函数的作用是取整数值，如果不是则为NAN //isNaN()函数的作用是判断parseInt取得的是否为整数
(2) The current node is the left child node of the parent node
…
2) If there is a right child leaf, the formula is:The left of the current node = the left of the parent node - the right child leaf of the current node The total width of - the width of the current node
3) If there is no right child leaf, but there is a left child leaf, the formula is:
The left of the current node = the left of the parent node - the total width of the left child leaf of the current node
4) If the current node itself is a leaf, the formula is:
The left of the current node = the left of the parent node - the width of the current node
1) The conditions for judgment are: The name of the current object’s parent node = ‘iNextNo’
…
2) If there is a left child leaf, the formula is:The left of the current node = the left of the parent node + the left child leaf of the current node The total width + the width of the current node
3）如果不存在左边子叶子，但存在右边子叶子，则公式为：
当前节点的left=父节点的left + 当前节点的右边子叶子的总宽度
4）如果当前节点本身就是叶子，则公式为：
当前节点的left=父节点的left + 当前节点的宽度
…
（2）和（3）的公式都是得到当前节点的left，我们还需要得到当前节点的top
很简单的公式：当前节点的top=父节点的top + 偏移量（80）
二叉树思路（3）
连接线条的定位思路：
（1）找到当前节点和父节点的位置
（2）判断当前节点是父节点的左边子节点，还是右边子节点
（3）画线条
这里定义了一些变量。
objOval //当前节点，是一个object
objParentOval //当前对象的父节点，是一个object
objLine //当前线条，是一个object
线条的定位公式：
from="x1,y1" to="x2,y2" 是 VML 里定位线条的方式
当前节点是父节点的左边子节点，则公式为：
from = 父节点的left + 偏移量（15） , 父节点的top + 偏移量（32）
to = 父节点的left + 偏移量（30） , 父节点的top - 偏移量（2）
当前节点是父节点的右边子节点，则公式为：
from = 父节点的left + 偏移量（35） ,父节点的top + 偏移量（32）
to = 父节点的left + 偏移量（20） ,父节点的top - 偏移量（2）
我所能想到的也就这么多了。
如果只是单纯的做一个公司结构图的话，会更简单很多。
下面是赛扬的思路，我也是在他的基础上深入一点而已。
首先计算最下层节点个数，得出宽度，
然后应该根据节点的从属关系计算其上层节点位置，递归。
每一层级的节点要按从属关系先排序
首先设“基本值”=节点应向右偏移量
每个包含子节点的节点的left值等于它所拥有的节点所占宽度的一半加上基本值
后话：
最近不知为何，网络一直都不好。断线的时间比在线的时间多。
所以没对代码简化，其实，要完善的功能还有很多，比如：
需要加右键菜单
右键菜单内含新建节点、修改节点名称、改变关联关系等
在每一个节点上都可右键打开这个节点的右键菜单
讲解：
1）flow2.xml 是数据文件，相信大家都不会有问题。
2）flow2.xsl 是格式文件，有几个地方要注意。
（1）脚本中：
（1） <xsl:value-of select="./iProcess/text()" /> ;（2） {./iProcess/text()}（1）和（2）的作用都是返回由 select 参数给出的表达式的字符串值。
他们的搜索条件相同，所以返回的值也一样。
只不过是使用的场合不同，他们的书写形式也就不一样。
<xsl:apply-templates select="team" order-by="blue_ID"/>
比如我们想生成以下代码
内容
我们假设名称为“name”,参数值为XML数据中当前节点下面的子节点book的值
第一种写法是先加属性名称，再加参数值
<p> <xsl:attribute name="name"> <xsl:value-of select="./book/text()"/> </xsl:attribute> 内容 </p>
第二种写法是直接加属性名称和参数值
<p name="{./book/text()}">内容</p>具体的使用你可以看我写的代码中的例子。
XSL在正式的 xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 的标准里
<xsl:value-of select="./book/text()"/>
作用是：只是把他的文本值写出来，而
<xsl:value-of select="./book"/>
是把他的文本值和他的所有子节点的内容显示出来。
大家可以试验一下，输出一个有子节点的，一个无子节点的
看看显示的结果是否相同。
（2）需要注意：
IE5 不支持
要用
<tag><xsl:attribute name="att"><xsl:value-of select="xpath"></xsl:attribute>
命名空间要用
xmlns:xsl="http://www.w3.org/TR/WD-xsl" <?xml version="1.0" encoding="gb2312" ?>
另外说一点：
在大多的XML教科书中所显示的代码中很少会加上encoding="gb2312" ，
因此我们在XML中用到中文的时候会报错，原因就是没有写这个申明。
后记：
这里说的是一种思路。如果触类旁通，自然能够派上用场。
以上就是XML卷之实战锦囊（5）：结构树图的内容，更多相关内容请关注PHP中文网（www.php.cn）！
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
