동기:
처음에는 회사 구조도를 만들어야 해서 이진 트리를 만들 생각이었습니다. 이전 접근 방식은 그래픽 소프트웨어를 이용해 직접 그림을 그리는 방식이었다. 보기에는 좋지만 변화가 있을 때마다 새로 칠해야 합니다. 반면 웹페이지의 줄 표시 및 레이아웃은 상당히 제한적입니다. 동적으로 생성된 데이터를 기반으로 한 조판 및 위치 지정은 매우 어렵고 미학적 측면도 만족스럽지 않습니다. 다양한 시도 끝에 데이터 작업에는 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:template match="FlowNode">…<SCRIPT language="JavaScript1.2">…alert('逐步显示');…</SCRIPT>…</xsl:template>
전체 재귀 프로세스는 위의 세 가지 모듈(템플릿)에 의해 완료됩니다.
첫 번째 템플릿
은 현재 노드의 각 하위 노드의 템플릿이 일치할 때 다음 두 템플릿을 호출하고, 후자의 두 템플릿은
이 실행될 때 첫 번째 템플릿을 호출합니다. 재귀 함수.
구문:
현재 노드에 있는 각 하위 노드의 템플릿을 차례로 일치시키려면
요소의 기본 형식을 사용해야 합니다
그렇지 않으면 일치하는 노드는 선택 매개변수
의 XPath 표현식 값(예:
)에 의해 결정됩니다.
(1)과 (2)의 함수는 select 매개변수에 의해 제공된 표현식의 문자열 값을 반환하는 것입니다.
검색 조건이 동일하므로 반환되는 값도 동일합니다.
그냥 사용되는 경우가 다르고, 쓰는 형태도 다를 뿐입니다.
(1)
(2) {./iProcess/text()}
여기에는 일부 변수가 정의되어 있으며, 이러한 변수를 기준으로 노드의 위치가 결정되어 계산식을 호출합니다.
root_left //루트의 왼쪽 여백 = 모든 리프의 할당 너비(y*10) + 모든 리프의 너비(y*50) + 왼쪽 여백의 기본 값(10)
root_top //루트의 상단 여백 = 상단 여백 기본 값(10)
objOval //현재 객체는 객체입니다
objOval_iProcess //현재 객체의 단계 값
objParentOval //부모 현재 객체의 노드는 객체입니다
objParentOval_iProcess //현재 객체의 부모 노드의 단계 값
objParent_name //현재 객체의 부모 노드 이름
Leaf_left //전체 중에서 왼쪽 리프의 수 현재 객체의 하위 노드
Leaf_right //현재 객체의 모든 하위 노드에 있는 오른쪽 리프 수
Leaf_sum //현재 객체의 모든 하위 노드에 있는 리프 수
Leaf: 의미 현재 노드에 하위 노드가 없음
노드 위치 지정 공식:
(1) 현재 노드가 루트 노드입니다
<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>
(2) 현재 노드가 부모 노드의 왼쪽 자식 노드
1) 판단 조건은 현재 객체의 부모 노드 이름='iNextYes'
…
2) 오른쪽 하위 리프가 있는 경우 수식은 다음과 같습니다.
현재 노드의 왼쪽=부모 노드의 왼쪽 - 현재 노드의 오른쪽 하위 리프의 전체 너비 - 현재 노드의 너비
3) 오른쪽 자식 리프는 없고 왼쪽 자식 리프가 있는 경우 수식은 다음과 같습니다.
현재 노드의 왼쪽 = 부모 노드의 왼쪽 - 현재 노드의 왼쪽 하위 리프의 전체 너비
4) 현재 노드 자체가 리프인 경우 수식은 다음과 같습니다.
현재 노드의 왼쪽 = 상위 노드의 왼쪽 - 노드의 왼쪽 현재 노드 너비
…
(3) 현재 노드는 상위 노드
의 오른쪽 자식 노드입니다.1) 조건 판단 기준은 다음과 같습니다. 현재 객체 상위 노드의 이름='iNextNo'
…
2) 왼쪽 하위 리프가 있는 경우 수식은 다음과 같습니다.
현재 노드의 왼쪽=현재 노드의 왼쪽 상위 노드 + 현재 노드의 왼쪽 하위 리프의 전체 너비 + 현재 노드의 너비
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）！
RSS 디코딩 : 컨텐츠 피드의 XML 구조Apr 17, 2025 am 12:09 AMRSS의 XML 구조에는 다음이 포함됩니다. 1. XML 선언 및 RSS 버전, 2. 채널 (채널), 3. 항목. 이러한 부분은 RSS 파일의 기초를 형성하여 사용자가 XML 데이터를 구문 분석하여 컨텐츠 정보를 얻고 처리 할 수 있도록합니다.
XML 기반 RSS 피드를 구문 분석하고 활용하는 방법Apr 16, 2025 am 12:05 AMrssfeedsUsexMlTOSYNDICATECONTENT; parsingTheMinVolvesRoadingXML, NavigatingItsStructure 및 extractingData.ApplicationSaggregatorsAngAggeratsAndTrackingPodCastePisOdes.
RSS 문서 : 좋아하는 콘텐츠를 제공하는 방법Apr 15, 2025 am 12:01 AMRSS 문서는 XML 파일을 통해 컨텐츠 업데이트를 게시하여 작동하며 사용자는 RSS 리더를 통해 구독하고 알림을받습니다. 1. Content Publisher는 RSS 문서를 생성하고 업데이트합니다. 2. RSS 리더는 XML 파일에 정기적으로 액세스하고 구문 분석합니다. 3. 사용자는 업데이트 된 콘텐츠를 탐색하고 읽습니다. 사용의 예 : TechCrunch의 RSS 피드를 구독하고 RSS 리더에게 링크를 복사하기 만하면됩니다.
XML이있는 건물 : RSS에 대한 실습 가이드Apr 14, 2025 am 12:17 AMXML을 사용하여 RSSFEED를 구축하는 단계는 다음과 같습니다. 1. 루트 요소를 만들고 버전을 설정하십시오. 2. 채널 요소와 기본 정보를 추가하십시오. 3. 제목, 링크 및 설명을 포함하여 항목 요소를 추가하십시오. 4. XML 구조를 문자열로 변환하고 출력하십시오. 이 단계를 사용하면 출시 날짜 및 저자 정보와 같은 추가 요소를 추가하여 유효한 RSSFeed를 처음부터 시작하고 기능을 향상시킬 수 있습니다.
RSS 문서 작성 : 단계별 자습서Apr 13, 2025 am 12:10 AMRSS 문서를 작성하는 단계는 다음과 같습니다. 1. 요소를 포함하여 루트 요소와 함께 XML 형식으로 쓰십시오. 2. 채널 정보를 설명하기위한 요소를 추가합니다. 3. 요소를 추가, 각각 컨텐츠 항목을 나타내는 요소를 추가하십시오 .,,,,,,,,,,,,,,,,, 4. 컨텐츠를 풍부하게하기 위해 선택적으로 추가 및 요소. 5. XML 형식이 올바른지 확인하고 온라인 도구를 사용하여 성능을 확인하고 최적화하며 콘텐츠를 업데이트하십시오.
RSS에서 XML의 역할 : 신디케이트 컨텐츠의 기초Apr 12, 2025 am 12:17 AMRSS에서 XML의 핵심 역할은 표준화되고 유연한 데이터 형식을 제공하는 것입니다. 1. XML의 구조 및 마크 업 언어 특성은 데이터 교환 및 스토리지에 적합합니다. 2. RSS는 XML을 사용하여 컨텐츠 공유를 용이하게하기 위해 표준화 된 형식을 만듭니다. 3. RSS에서 XML의 적용에는 제목 및 출시 날짜와 같은 피드 컨텐츠를 정의하는 요소가 포함됩니다. 4. 표준화 및 확장 성이 포함되며, 문제에는 문서 장황 및 엄격한 구문 요구 사항이 포함됩니다. 모범 사례에는 XML 유효성 검증, 간단한 유지, CDATA 사용 및 정기적으로 업데이트가 포함됩니다.
XML에서 읽기 쉬운 컨텐츠까지 : Demystifying RSS 피드Apr 11, 2025 am 12:03 AMRSSFEEDSAREXMLDOCUMentsORMUSSEDFORCONTENGAGNEGANGANDANDAND 및 DISTIBLITION.TOTRANSFORMTHEMINTOREADBECONCONTENT : 1) PARSETHEXMLUSINGLIBRARIES LIKEFEDPARSERINPYTHON.2) HORDLEDIFFERENTSSSSSSONS 및 POTELINGEPARSINGERRORS.3) 변형 된 정보 형식 FrrONTLIKETLIKET
JSON을 기반으로 RSS 대안이 있습니까?Apr 10, 2025 am 09:31 AMJSONFEED는 JSON 기반 RSS 대안으로 단순성과 사용 편의성을 갖는 장점이 있습니다. 1) JSONFEED는 JSON 형식을 사용하여 생성 및 구문 분석이 쉽습니다. 2) 동적 생성을 지원하며 현대 웹 개발에 적합합니다. 3) JSONFEED를 사용하면 컨텐츠 관리 효율성과 사용자 경험이 향상 될 수 있습니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.
드림위버 CS6
시각적 웹 개발 도구
