XML Volume Practical Tips (5): Structure Tree Diagram-XML/RSS Tutorial-php.cn

Home

Backend Development

XML/RSS Tutorial

XML Volume Practical Tips (5): Structure Tree Diagram

黄舟

Feb 10, 2017 pm 04:22 PM

xml

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(&#39;逐步显示&#39;);…</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.

Syntax:

To match the template of each child node in the current node in turn, the basic form of this element should be used .

Otherwise, the matching node is determined by the value of the XPath expression in the select parameter, such as

The role of (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 also the same.

It’s just that their writing forms are different depending on the occasions they are used.

(1)

(2) {./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 //The current object is an object

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

1) The conditions for judgment are: The name of the current object’s parent node = ‘iNextYes’

…

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

...

(3) The current node is the right child node of the parent 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）！

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

RSS & XML: Understanding the Dynamic Duo of Web ContentApr 19, 2025 am 12:03 AM

RSS and XML are tools for web content management. RSS is used to publish and subscribe to content, and XML is used to store and transfer data. They work with content publishing, subscriptions, and update push. Examples of usage include RSS publishing blog posts and XML storing book information.

RSS Documents: The Foundation of Web SyndicationApr 18, 2025 am 12:04 AM

RSS documents are XML-based structured files used to publish and subscribe to frequently updated content. Its main functions include: 1) automated content updates, 2) content aggregation, and 3) improving browsing efficiency. Through RSSfeed, users can subscribe and get the latest information from different sources in a timely manner.

Decoding RSS: The XML Structure of Content FeedsApr 17, 2025 am 12:09 AM

The XML structure of RSS includes: 1. XML declaration and RSS version, 2. Channel (Channel), 3. Item. These parts form the basis of RSS files, allowing users to obtain and process content information by parsing XML data.

How to Parse and Utilize XML-Based RSS FeedsApr 16, 2025 am 12:05 AM

RSSfeedsuseXMLtosyndicatecontent;parsingtheminvolvesloadingXML,navigatingitsstructure,andextractingdata.Applicationsincludebuildingnewsaggregatorsandtrackingpodcastepisodes.

RSS Documents: How They Deliver Your Favorite ContentApr 15, 2025 am 12:01 AM

RSS documents work by publishing content updates through XML files, and users subscribe and receive notifications through RSS readers. 1. Content publisher creates and updates RSS documents. 2. The RSS reader regularly accesses and parses XML files. 3. Users browse and read updated content. Example of usage: Subscribe to TechCrunch's RSS feed, just copy the link to the RSS reader.

Building Feeds with XML: A Hands-On Guide to RSSApr 14, 2025 am 12:17 AM

The steps to build an RSSfeed using XML are as follows: 1. Create the root element and set the version; 2. Add the channel element and its basic information; 3. Add the entry element, including the title, link and description; 4. Convert the XML structure to a string and output it. With these steps, you can create a valid RSSfeed from scratch and enhance its functionality by adding additional elements such as release date and author information.

Creating RSS Documents: A Step-by-Step TutorialApr 13, 2025 am 12:10 AM

The steps to create an RSS document are as follows: 1. Write in XML format, with the root element, including the elements. 2. Add, etc. elements to describe channel information. 3. Add elements, each representing a content entry, including,,,,,,,,,,,. 4. Optionally add and elements to enrich the content. 5. Ensure the XML format is correct, use online tools to verify, optimize performance and keep content updated.

XML's Role in RSS: The Foundation of Syndicated ContentApr 12, 2025 am 12:17 AM

The core role of XML in RSS is to provide a standardized and flexible data format. 1. The structure and markup language characteristics of XML make it suitable for data exchange and storage. 2. RSS uses XML to create a standardized format to facilitate content sharing. 3. The application of XML in RSS includes elements that define feed content, such as title and release date. 4. Advantages include standardization and scalability, and challenges include document verbose and strict syntax requirements. 5. Best practices include validating XML validity, keeping it simple, using CDATA, and regularly updating.

See all articles