Javascript 如何使用XSLT查找和组合XML源文档不同部分中的数据，以创建有限元网格的SVG可视化 出身背景

在我作为一名工程师的工作中，我经常用它来分析土壤中的地下结构。底层代码非常优秀，但是UI——特别是程序创建和显示输入有限元网格的能力——是有限的，还有很多需要改进的地方。我试图在浏览器中使用javascript、CSS和SVG图形为XML格式的网格数据创建更好、更快的查看体验

我想我理解XML和SVG。然而，我的XSLT编程经验是-zilch-；W3Schools教程有一点帮助，但我很难在网上找到好的资源来深入学习我需要知道的东西。如果有人能帮助我开始解决这个问题，我将不胜感激。我渴望学习的不仅仅是如何进行转换，而是如何在将来编写自己的XSLT转换

具体问题 此时，我的想法是将有限元网格中的每个元素表示为SVG多边形。但是，我很难理解如何查找每个多边形的每个节点的X和Y值，以及如何将坐标插入正确的位置

下面是我必须处理的XML输入文件类型的结构

<?xml version="1.0" encoding="UTF-8"?>
<CANDEMeshGeom>
   <Control>
      <numNodes></numNodes>    <!--   # of nodes   -->
      <numElements></numElements>    <!--   # of elements   -->
      <numSoilMaterials></numSoilMaterials>    <!--   # of soil materials   -->
      <numInterfaceMaterials></numInterfaceMaterials>    <!--   # of interface materials - not relevant   -->
      <inputCheck></inputCheck>    <!--   not relevant   -->
      <numBoundCond></numBoundCond>    <!--   # of boundary conditions - not relevant   -->
      <numConstIncr></numConstIncr>    <!--   # of construction increments   -->
      <LevelNum></LevelNum>    <!--   not relevant   -->
      <Heading></Heading>    <!--   Mesh heading   -->
      <meshTitle></meshTitle>    <!--   Title of the mesh   -->
   </Control>
   <nodeData>    <!--   all of the nodes are listed first   -->
      <nodeCoord>    <!--   a node   -->
         <nodeNumber></nodeNumber>    <!--   the integer node #   -->
         <nodeXCoord></nodeXCoord> <!--   the X coordinate, floating point #   -->
         <nodeYCoord></nodeYCoord> <!--   the Y coordinate  floating point # -->
      </nodeCoord>

      <!--   more nodes....   -->

   </nodeData>
   <elementData>    <!--   all of the elements listed 2nd   -->
   <!--   All elements are defined by 4 nodes: I, J, K, L. Note that there are 3 kinds of elements: Beam, Triangle, and Quad. A beam element repeats the 2nd (J) node number three times. A triangle element repeats the 3rd (K) node number twice. The quad element has 4 different node numbers.   -->
      <elemConn>
         <elemNumber></elemNumber>    <!--   each element has a unique #   -->
         <elemNode1></elemNode1>    <!--   element I node # (from nodes defined above)   -->
         <elemNode2></elemNode2>    <!--   element J node   -->
         <elemNode3></elemNode3>    <!--   element K node   -->
         <elemNode4></elemNode4>    <!--   element L node   -->
         <elemMatNum></elemMatNum>    <!--   element's material type #   -->
         <elemConstrIncr></elemConstrIncr>    <!--   element's construction increment #  -->
         <elemType></elemType>    <!--   type of element: BEAM, TRIA, QUAD   -->
      </elemConn>

      <!--   more elements....   -->

   </elementData>
   <boundaryData>
   <!--   the boundary data isn't relevant to producing the graphical mesh output above   -->
   </boundaryData>
   <soilData>
   <!--   the soil data also isn't relevant   -->
   </soilData>
   <interfaceData>
   <!--   the interface data also isn't relevant   -->
   </interfaceData>
</CANDEMeshGeom>

SVG文件输出的结构如下：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
        xmlns:xlink="http://www.w3.org/1999/xlink">
    <!--   a <polygon> element for every <elemConn> in the input file    -->
    <!--   the 'points' attribute is populated by "looking up" the <nodeXCoord> 
        and <nodeYCoord> based on the nod number inside of <elemNode1>, <elemNode2>,
        <elemNode3>, and <elemNode4>     -->
    <polygon points="<!--elemNode1X-->,
                     <!--elemNode1Y--> 
                     <!--SPACE-->
                     <!--elemNode2X-->,
                     <!--elemNode2Y-->
                     <!--SPACE-->
                     <!--elemNode3X-->,
                     <!--elemNode3Y-->
                     <!--SPACE-->
                     <!--elemNode4X-->,
                     <!--elemNode4Y-->
                     "/>
</svg>

这里是一个例子，我正在寻找一种结果，以产生不同的颜色代表不同的材料。可以下载与下图关联的XML文件

未来计划 我还希望能够在表示元素的材质或构造增量之间切换元素的颜色。稍后，我将尝试添加更多功能，例如显示节点和元素编号、使用标签显示边界条件等。也许我甚至会扩展该功能，以便您也可以在浏览器中编辑网格。现在，我正忙于手动编辑基于文本的输入文件。。。唉

---

注：此问题（包括标题）已被大量编辑；最初的版本太宽泛了，因为我不知道我在问什么。非常感谢和帮助我解决这个问题

这里有一个小XML和示例XSL，它只是一个尝试，可以帮助您快速开始创建。这会让你开始你的项目，看起来很不错。考虑到这种简化的XML示例：

<CANDEMeshGeom>
    <nodeData>
        <nodeCoord>
            <nodeNumber>1</nodeNumber>
            <nodeXCoord>5</nodeXCoord>
            <nodeYCoord>5</nodeYCoord>
        </nodeCoord>
        <nodeCoord>
            <nodeNumber>2</nodeNumber>
            <nodeXCoord>10</nodeXCoord>
            <nodeYCoord>5</nodeYCoord>
        </nodeCoord>
        <nodeCoord>
            <nodeNumber>3</nodeNumber>
            <nodeXCoord>10</nodeXCoord>
            <nodeYCoord>10</nodeYCoord>
        </nodeCoord>
        <nodeCoord>
            <nodeNumber>4</nodeNumber>
            <nodeXCoord>5</nodeXCoord>
            <nodeYCoord>10</nodeYCoord>
        </nodeCoord>
    </nodeData>
    <elementData>
        <elemConn>
            <elemNode1>1</elemNode1>
            <elemNode2>2</elemNode2>
            <elemNode3>3</elemNode3>
            <elemNode4>4</elemNode4>
        </elemConn>
    </elementData>
</CANDEMeshGeom>

您可以使用以下XSL：

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    version="1.0">
    <xsl:template match="/">
        <svg>
        <xsl:apply-templates select="//elemConn"/>
        </svg>
    </xsl:template>
    <xsl:template match="elemConn">
        <polygon>
            <xsl:call-template name="drawpoly"/>
        </polygon>
    </xsl:template>
    <xsl:template name="drawpoly">
        <xsl:attribute name="points">
            <xsl:call-template name="getpoint">
                <xsl:with-param name="nodenum" select="elemNode1"/>
            </xsl:call-template>
            <xsl:text> </xsl:text>
            <xsl:call-template name="getpoint">
                <xsl:with-param name="nodenum" select="elemNode2"/>
            </xsl:call-template>
            <xsl:text> </xsl:text>
            <xsl:call-template name="getpoint">
                <xsl:with-param name="nodenum" select="elemNode3"/>
            </xsl:call-template>
            <xsl:text> </xsl:text>
            <xsl:call-template name="getpoint">
                <xsl:with-param name="nodenum" select="elemNode4"/>
            </xsl:call-template>
        </xsl:attribute>
    </xsl:template>
    <xsl:template name="getpoint">
        <xsl:param name="nodenum"/>
        <xsl:value-of select="//nodeCoord[nodeNumber=$nodenum]/nodeXCoord"/>
        <xsl:text>,</xsl:text>
        <xsl:value-of select="//nodeCoord[nodeNumber=$nodenum]/nodeYCoord"/>        
    </xsl:template>
</xsl:stylesheet>

这将产生以下示例输出XML：

<svg><polygon points="5,5 10,5 10,10 5,10"/></svg>

---

您当然可以对此进行扩展，使其成为真正的SVG，添加您的颜色想法等等。这只是演示了从元素节点号中查找所需的X、Y信息所需的查找。

我建议您添加一个简单的XML源代码和期望获得的SVG XML代码，以及迄今为止尝试过的任何XSLT。最好把注意力集中在你转型过程中遇到的问题上，如果你觉得有必要，再提出一个或多个后续问题。这是一个很好的建议。我只是不知道从哪里开始——我可以编写预期的SVG输出文件，这是个好主意。我应该开始一个新的问题吗…？你可以编辑这个问题，因为它没有答案，而且已经接近投票了。SVG是XML。如果你写一个客观的问题，重点是XML转换，显示读取和生成的代码，而不是图像，你有更好的机会。@helderdarocha：这更好吗？我想这是我在不知情的情况下寻找的答案，它是完美的。我将编辑问题以符合此答案，然后将此标记为已接受的答案，然后将我需要帮助的其他方面拆分为未来的问题。