XML Volume Practical Tips (5): Structure Tree Diagram
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>Looking at the slow motion above, can you guys understand my thoughts?
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 entire recursive process is completed by the above three modules (templates).
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 <xsl:apply-templates select="./FlowNode" />
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) <xsl:value-of select="./iProcess/text()" />
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"/>
比如我们想生成以下代码
<p 名称=“参数值”>内容</p>
我们假设名称为“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 att="{xpath}">
要用
<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中文网（m.sbmmt.com）！
Hot AI Tools
Undress AI Tool
Undress images for free
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undresser.AI Undress
AI-powered app for creating realistic nude photos
ArtGPT
AI image generator for creative art from text prompts.
Stock Market GPT
AI powered investment research for smarter decisions
Hot Article
Popular tool
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
20441
7
13592
4
JSON vs. XML: Why RSS Chose XML
May 05, 2025 am 12:01 AM
RSS chose XML instead of JSON because: 1) XML's structure and verification capabilities are better than JSON, which is suitable for the needs of RSS complex data structures; 2) XML was supported extensively at that time; 3) Early versions of RSS were based on XML and have become a standard.
RSS in XML: Decoding Tags, Attributes, and Structure
Apr 24, 2025 am 12:09 AM
RSS is an XML-based format used to publish and subscribe to content. The XML structure of an RSS file includes a root element, an element, and multiple elements, each representing a content entry. Read and parse RSS files through XML parser, and users can subscribe and get the latest content.
Understanding RSS Documents: A Comprehensive Guide
May 09, 2025 am 12:15 AM
RSS documents are a simple subscription mechanism to publish content updates through XML files. 1. The RSS document structure consists of and elements and contains multiple elements. 2. Use RSS readers to subscribe to the channel and extract information by parsing XML. 3. Advanced usage includes filtering and sorting using the feedparser library. 4. Common errors include XML parsing and encoding issues. XML format and encoding need to be verified during debugging. 5. Performance optimization suggestions include cache RSS documents and asynchronous parsing.
XML's Advantages in RSS: A Technical Deep Dive
Apr 23, 2025 am 12:02 AM
XML has the advantages of structured data, scalability, cross-platform compatibility and parsing verification in RSS. 1) Structured data ensures consistency and reliability of content; 2) Scalability allows the addition of custom tags to suit content needs; 3) Cross-platform compatibility makes it work seamlessly on different devices; 4) Analytical and verification tools ensure the quality and integrity of the feed.
Building XML Applications with C : Practical Examples
May 03, 2025 am 12:16 AM
You can use the TinyXML, Pugixml, or libxml2 libraries to process XML data in C. 1) Parse XML files: Use DOM or SAX methods, DOM is suitable for small files, and SAX is suitable for large files. 2) Generate XML file: convert the data structure into XML format and write to the file. Through these steps, XML data can be effectively managed and manipulated.
RSS, XML and the Modern Web: A Content Syndication Deep Dive
May 08, 2025 am 12:14 AM
RSS and XML are still important in the modern web. 1.RSS is used to publish and distribute content, and users can subscribe and get updates through the RSS reader. 2. XML is a markup language and supports data storage and exchange, and RSS files are based on XML.
XML in C : Handling Complex Data Structures
May 02, 2025 am 12:04 AM
Working with XML data structures in C can use the TinyXML or pugixml library. 1) Use the pugixml library to parse and generate XML files. 2) Handle complex nested XML elements, such as book information. 3) Optimize XML processing code, and it is recommended to use efficient libraries and streaming parsing. Through these steps, XML data can be processed efficiently.
Beyond Basics: Advanced RSS Features Enabled by XML
May 07, 2025 am 12:12 AM
RSS enables multimedia content embedding, conditional subscription, and performance and security optimization. 1) Embed multimedia content such as audio and video through tags. 2) Use XML namespace to implement conditional subscriptions, allowing subscribers to filter content based on specific conditions. 3) Optimize the performance and security of RSSFeed through CDATA section and XMLSchema to ensure stability and compliance with standards.
