javascript - How to look up and combine data in different parts of an XML source document using XSLT to create SVG visualization of a finite element mesh -

background

in job engineer, use a finite element analysis program analyzing buried structures in soil. underlying code excellent, ui - ability of program create , display input finite element meshes - limited, , leaves desired. attempting create better, faster viewing experience xml formatted mesh data using javascript, css , svg graphics in browser.

i think understand xml , svg. however, xslt programming experience -zilch-; w3schools tutorial has helped little bit, having trouble finding resources online go deeper in learning need know. appreciate if @ least me started in solving problem. eager learn not how it, how write own xslt transformations in future.

specific problem

my idea @ point represent each element in finite element mesh svg polygon. having trouble understanding how "look up" x , y values each node of every individual polygon , have coordinates inserted right places.

here structure of type of xml input file have work with.

<?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 mesh   -->    </control>    <nodedata>    <!--   of nodes listed first   -->       <nodecoord>    <!--   node   -->          <nodenumber></nodenumber>    <!--   integer node #   -->          <nodexcoord></nodexcoord> <!--   x coordinate, floating point #   -->          <nodeycoord></nodeycoord> <!--   y coordinate  floating point # -->       </nodecoord>        <!--   more nodes....   -->     </nodedata>    <elementdata>    <!--   of elements listed 2nd   -->    <!--   elements defined 4 nodes: i, j, k, l. note there 3 kinds of elements: beam, triangle, , quad. beam element repeats 2nd (j) node number 3 times. triangle element repeats 3rd (k) node number twice. quad element has 4 different node numbers.   -->       <elemconn>          <elemnumber></elemnumber>    <!--   each element has unique #   -->          <elemnode1></elemnode1>    <!--   element 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>    <!--   boundary data isn't relevant producing graphical mesh output above   -->    </boundarydata>    <soildata>    <!--   soil data isn't relevant   -->    </soildata>    <interfacedata>    <!--   interface data isn't relevant   -->    </interfacedata> </candemeshgeom> 

the svg file output structured this:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"         xmlns:xlink="http://www.w3.org/1999/xlink">     <!--   <polygon> element every <elemconn> in input file    -->     <!--   'points' attribute populated "looking up" <nodexcoord>          , <nodeycoord> based on nod number inside of <elemnode1>, <elemnode2>,         <elemnode3>, , <elemnode4>     -->     <polygon points="<!--elemnode1x-->,                      <!--elemnode1y-->                       <!--space-->                      <!--elemnode2x-->,                      <!--elemnode2y-->                      <!--space-->                      <!--elemnode3x-->,                      <!--elemnode3y-->                      <!--space-->                      <!--elemnode4x-->,                      <!--elemnode4y-->                      "/> </svg> 

here example of kind of result looking produce (the different colors represent different materials). xml file associated image below can downloaded here

future plans

i want able toggle colors of elements between representing material of element or construction increment. later on try add more functionality, displaying node , element numbers, displaying boundary conditions (with labels), things that. perhaps extend capability can edit mesh in browser (right stuck editing text-based input files hand... sigh).

note: question (including title) has been heavily edited; original version broad, since didn't know asking. many @helderdarochaless , @kevin brown helping me figure out.

here's mini xml , sample xsl taste jump start creation. should started in project (which looks great one). given cut down sample 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> 

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

which yield sample output xml:

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

you can expand on make real svg, add color ideas , more. demonstrating "lookup" need find needed x,y information element node numbers.