XML 실용 요령 5권: 구조 트리 다이어그램-XML/RSS 튜토리얼-php.cn

집

백엔드 개발

XML/RSS 튜토리얼

XML 실용 요령 5권: 구조 트리 다이어그램

巴扎黑

Mar 19, 2017 pm 03:46 PM

phpPHP 튜토리얼비디오 튜토리얼

[소개] 처음 이진트리를 만들자고 생각한 것은 회사 구조도를 만들어야 했기 때문이었습니다. 이전 접근 방식은 그래픽 소프트웨어를 이용해 직접 그림을 그리는 방식이었다. 보기에는 좋지만 변경 사항이 있을 때마다 새로 칠해야 합니다. 반면 웹페이지의 줄 표시 및 레이아웃은 상당히 제한적입니다. 동적으로 생성된 숫자를 바탕으로

회사 구조도를 만들어야 해서 처음 이진트리를 만들까 생각하게 되었습니다. 이전 접근 방식은 그래픽 소프트웨어를 이용해 직접 그림을 그리는 방식이었다. 보기에는 좋지만 변화가 있을 때마다 새로 칠해야 합니다. 반면 웹페이지의 줄 표시 및 레이아웃은 상당히 제한적입니다. 동적으로 생성된 데이터를 기반으로 한 조판 및 위치 지정은 매우 어렵고 미학적 측면도 만족스럽지 않습니다. 다양한 시도 끝에 데이터 작업에는 xml+XSL을 사용하고, 선을 아름답게 하려면 VML을 사용하고, 객체 위치를 지정하려면 javaSCRipT를 사용하기로 결정했습니다.

재료:
XML 볼륨 구조 트리 다이어그램
2개의 파일이 있습니다: flow2.xml 및 flow2.xsl
효과:
여기에서 찾아보기
설명:
바이너리 트리 아이디어(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>

VML의 기본 형식이므로 자세히 설명하지 않겠습니다.

XML은 트리 구조입니다. 각 데이터를 읽을 때 이
XML 데이터 트리를 순회해야 합니다. 재귀 작업은 XSL의 장점 중 하나입니다.
저도
순회 작업을 수행하기 위해 다양한 방법을 사용했지만 실패한 후 XSL을 사용하기로 결정했습니다.

<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>

논리는 매우 간단합니다. 현재 노드(1) 아래에 두 개의 하위 노드(2, 3)가 있습니다.
노드 1의 왼쪽 하단과 오른쪽 하단에 노드 2와 노드 3을 배치하면 됩니다.
여기에서는 쉽게 표시할 수 있도록 왼쪽 노드와 오른쪽 노드의 연결선에 각각 녹색과 빨간색을 사용했습니다.

앞서 XSL의 재귀 기능에 대해 이야기했습니다. 각
표시 단계를 더 명확하게 보려면 다음 코드를 모방하고 경고 문을 추가하기만 하면 됩니다.

아아아아아

위의 슬로우모션을 보시고 제 생각이 이해가 되시나요?

이진 트리 아이디어(2)
내 아이디어는 매우 간단합니다.
(1) 현재 노드의 정보를 읽고 VML을 사용하여 새 노드를 생성합니다. 물체.
객체에 초기값 지정(예: 이름, ID, 스타일 등)
(2) 스크립트 컨트롤을 사용하여 현재 객체 위치 지정
(3) 현재 노드와 노드 사이에 화살표 추가 해당 상위 노드인 라인입니다.
(4) 현재 노드의 하위 노드를 계속 찾아 끝까지 반복합니다.
즉, 모든 노드를 순회하여 트리가 생성되었습니다.

…
<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>

整个递归过程就是靠上面这三个模块（template）来完成的。
第一个template在匹配当前节点中每一个子节点的模板的时候
调用了后面两个template；而后面两个template又在具体执行
的时候调用了第一个template ，这就相当于一个递归函数。

语法：

要依次匹配当前节点中的每个子节点的模板，应使用该元
素的基本形式。
否则，匹配的节点由 select 参数中 XPath 表达式的值决
定，如

（1）和（2）的作用都是返回由 select 参数给出的表达式的字符串值。
他们的搜索条件相同，所以返回的值也一样。
只不过是使用的场合不同，他们的书写形式也就不一样。

（1）
（2） {./iProcess/text()}

这里定义了一些变量，节点的定位就是根据这些变量来调用运算公式的。

root_left //根的左边距=所有叶子的分配宽度（y*10） + 所有叶子的宽度（y*50） + 左边距基本值（10）
root_top //根的上边距=上边距基本值（10）
objOval //当前对象，是一个object
objOval_iProcess //当前对象的步骤值
objParentOval //当前对象的父节点，是一个object
objParentOval_iProcess //当前对象父节点的步骤值
objParent_name //当前对象父节点的名称
Leaf_left //当前对象的所有子节点中的左边叶子数
Leaf_right //当前对象的所有子节点中的右边叶子数
Leaf_sum //当前对象的所有子节点中叶子数

叶子：是指当前节点没有子节点

节点的定位公式：

（1）当前节点是根节点

//根的位置
SobjOval.style.left=parseInt(root_left);
SobjOval.style.top=parseInt(root_top);
//parseInt() 函数的作用是取整数值，如果不是则为NAN
//isNaN()函数的作用是判断parseInt取得的是否为整数

（2）当前节点是父节点的左边子节点

1）判断的条件是：当前对象父节点的名称='iNextYes'
…
2）如果存在右边子叶子，则公式为：
当前节点的left=父节点的left - 当前节点的右边子叶子的总宽度- 当前节点的宽度

3）如果不存在右边子叶子，但存在左边子叶子，则公式为：
当前节点的left=父节点的left - 当前节点的左边子叶子的总宽度

4）如果当前节点本身就是叶子，则公式为：
当前节点的left=父节点的left - 当前节点的宽度
…

（3）当前节点是父节点的右边子节点

1）判断的条件是：当前对象父节点的名称='iNextNo'
…
2）如果存在左边子叶子，则公式为：
当前节点的left=父节点的left + 当前节点的左边子叶子的总宽度 + 当前节点的宽度

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） ;
（2） {./iProcess/text()}

（1）和（2）的作用都是返回由 select 参数给出的表达式的字符串值。
他们的搜索条件相同，所以返回的值也一样。
只不过是使用的场合不同，他们的书写形式也就不一样。

比如我们想生成以下代码

内容

我们假设名称为“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" 的标准里

作用是：只是把他的文本值写出来，而

是把他的文本值和他的所有子节点的内容显示出来。
大家可以试验一下，输出一个有子节点的，一个无子节点的
看看显示的结果是否相同。

（2）需要注意：

IE5 不支持
要用

命名空间要用
xmlns:xsl="http://www.w3.org/TR/WD-xsl"

另外说一点：
在大多的XML教科书中所显示的代码中很少会加上encoding="gb2312" ，
因此我们在XML中用到中文的时候会报错，原因就是没有写这个申明。

위 내용은 XML 실용 요령 5권: 구조 트리 다이어그램의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

RSS 문서 형식 : RSS 2.0 이상 탐색Apr 26, 2025 am 12:22 AM

RSS2.0은 콘텐츠 게시자가 컨텐츠를 구조화 된 방식으로 배포 할 수있는 개방형 표준입니다. 제목, 링크, 설명, 릴리스 날짜 등과 같은 풍부한 메타 데이터가 포함되어있어 가입자가 컨텐츠를 빠르게 탐색하고 액세스 할 수 있습니다. RSS2.0의 장점은 단순성과 확장 성입니다. 예를 들어, 사용자 정의 요소가 허용되므로 개발자는 저자, 카테고리 등과 같은 요구에 따라 추가 정보를 추가 할 수 있습니다.

RSS 이해 : XML 관점Apr 25, 2025 am 12:14 AM

RSS는 자주 업데이트되는 컨텐츠를 게시하는 데 사용되는 XML 기반 형식입니다. 1. RSSFEED는 제목, 링크, 설명 등을 포함하여 XML 구조를 통해 정보를 구성합니다. 2. RSSFEED를 만들려면 XML 구조로 작성하고 언어 및 출시 날짜와 같은 메타 데이터를 추가해야합니다. 3. 고급 사용에는 멀티미디어 파일과 분류 된 정보가 포함될 수 있습니다. 4. 디버깅 중 XML 검증 도구를 사용하여 필요한 요소가 존재하고 올바르게 인코딩되도록하십시오. 5. RSSFEED 최적화는 구조를 단순하게 유지하고 페이징, 캐싱 및 유지함으로써 달성 할 수 있습니다. 이 지식을 이해하고 적용함으로써 컨텐츠를 효과적으로 관리하고 배포 할 수 있습니다.

XML의 RSS : 태그, 속성 및 구조 디코딩Apr 24, 2025 am 12:09 AM

RSS는 컨텐츠를 게시하고 구독하는 데 사용되는 XML 기반 형식입니다. RSS 파일의 XML 구조에는 컨텐츠 항목을 나타내는 루트 요소, 요소 및 여러 요소가 포함됩니다. XML Parser를 통해 RSS 파일을 읽고 구문 분석하고 사용자는 최신 컨텐츠를 구독하고 얻을 수 있습니다.

RSS에서 XML의 장점 : 기술 깊은 다이빙Apr 23, 2025 am 12:02 AM

XML은 RSS에서 구조화 된 데이터, 확장 성, 크로스 플랫폼 호환성 및 구문 분석 검증의 장점을 가지고 있습니다. 1) 구조화 된 데이터는 컨텐츠의 일관성과 신뢰성을 보장합니다. 2) 확장 성은 콘텐츠 요구에 맞게 맞춤형 태그를 추가 할 수 있습니다. 3) 크로스 플랫폼 호환성은 다른 장치에서 원활하게 작동합니다. 4) 분석 및 검증 도구는 피드의 품질과 무결성을 보장합니다.

XML의 RSS : 컨텐츠 신디케이션의 핵심을 공개합니다Apr 22, 2025 am 12:08 AM

XML에서 RSS 구현은 구조화 된 XML 형식을 통해 컨텐츠를 구성하는 것입니다. 1) RSS는 채널 정보 및 프로젝트 목록과 같은 요소를 포함하여 XML을 데이터 교환 형식으로 사용합니다. 2) RSS 파일을 생성 할 때는 사양에 따라 컨텐츠를 구성하고 구독을 위해 서버에 게시해야합니다. 3) RSS 파일은 리더 또는 플러그인을 통해 구독하여 컨텐츠를 자동으로 업데이트 할 수 있습니다.

기본 사항을 넘어서 : 고급 RSS 문서 기능Apr 21, 2025 am 12:03 AM

RSS의 고급 기능에는 컨텐츠 네임 스페이스, 확장 모듈 및 조건부 구독이 포함됩니다. 1) 컨텐츠 네임 스페이스는 RSS 기능을 확장합니다. 2) 메타 데이터를 추가하기 위해 Dublincore 또는 iTunes와 같은 확장 된 모듈, 3) 특정 조건에 따라 조건부 구독 필터 항목. 이러한 기능은 XML 요소 및 속성을 추가하여 정보 수집 효율성을 향상시켜 구현됩니다.

XML 백본 : RSS 피드가 구조화되는 방법Apr 20, 2025 am 12:02 AM

rssfeedsusexmltostructurecontentupdates.1) xmlprovideahierarchicalstructurefordata.2) the ElementDefinesThefeed 'sidentityandContainsElements.3) elementsreent indindividualcontentpieces.4) rssisextensible, 허용 Bestpracticesin

RSS & XML : 웹 컨텐츠의 동적 듀오 이해Apr 19, 2025 am 12:03 AM

RSS 및 XML은 웹 컨텐츠 관리를위한 도구입니다. RSS는 컨텐츠를 게시하고 구독하는 데 사용되며 XML은 데이터를 저장하고 전송하는 데 사용됩니다. 컨텐츠 게시, 구독 및 업데이트 푸시와 함께 작동합니다. 사용의 예로는 RSS 게시 블로그 게시물 및 XML 저장 도서 정보가 있습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

WebStorm Mac 버전

유용한 JavaScript 개발 도구

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.