如何從XML數據創建SVG（在存在-DB使用）

Question

我有這樣的XML文件：

<SWIAT> 
<KRAINA_GEOG TYP="Pobrzeze"> 
    <NAZWA>Południowobałtyckie</NAZWA> 
    <POWIERZCHNIA>19000</POWIERZCHNIA> 
    <OPADY_MIN>400</OPADY_MIN> 
    <OPADY_MAX>800</OPADY_MAX> 
</KRAINA_GEOG> 
<KRAINA_GEOG TYP="Nizina"> 
    <NAZWA>Środkowoeuropejska</NAZWA> 
    <POWIERZCHNIA>540000</POWIERZCHNIA> 
    <OPADY_MIN>400</OPADY_MIN> 
    <OPADY_MAX>750</OPADY_MAX> 
    <KRAINA_GEOG TYP="Nizina"> 
     <NAZWA>Holenderska</NAZWA> 
     <POWIERZCHNIA>24915</POWIERZCHNIA> 
     <OPADY_MIN>550</OPADY_MIN> 
     <OPADY_MAX>700</OPADY_MAX> 
    </KRAINA_GEOG> 
    <KRAINA_GEOG TYP="Nizina"> 
     <NAZWA>Południowowielkopolska</NAZWA> 
     <POWIERZCHNIA>17000</POWIERZCHNIA> 
     <OPADY_MIN>500</OPADY_MIN> 
     <OPADY_MAX>650</OPADY_MAX> 
     <KRAINA_GEOG TYP="Kotlina"> 
      <NAZWA>Szczercowska</NAZWA> 
      <POWIERZCHNIA>1203</POWIERZCHNIA> 
      <OPADY_MIN>500</OPADY_MIN> 
      <OPADY_MAX>600</OPADY_MAX> 
     </KRAINA_GEOG> 
     <KRAINA_GEOG TYP="Rownina"> 
      <NAZWA>Rychwalska</NAZWA> 
      <POWIERZCHNIA>1186</POWIERZCHNIA> 
     </KRAINA_GEOG> 
    </KRAINA_GEOG> 
</KRAINA_GEOG> 

我要讓SVG條形圖與值從<POWIERZCHNIA>。這個怎麼做？我想在Exist-db中使用它。 任何想法？ 感謝您的幫助。

Answer 1

雖然您可能會發現某些圖表庫可能不需要您學習XSLT，但您可以使用XSLT生成SVG。藉助XSLT，您可以選擇使用XPath的節點，並且可以按照您喜歡的方式操作它們。你甚至可以在瀏覽器中動態地生成它（雖然有版本限制）。

我寫了一篇關於使用XSLT 1.0生成SVG圖表的教程。不幸的是，它是葡萄牙語，我從來沒有時間翻譯它。但是我調整了源代碼XML並編寫了一個小的XSLT樣式表，它將生成一個簡單的SVG條形圖，其中包含所有POWIERZCHNIA字段中的數字（不考慮嵌套）。

我用尺寸的固定值定義了一些變量。 $max-powierzchnia變量使用POWIERZCHNIA * $max-bar-length/$max-powierzchnia中的值選擇將用於計算酒吧長度的最大值。 SWIAT XSL模板定義了SVG的根元素，然後按照降序排列（按照POWIERZCHNIA的順序排列），並處理在KRAINA_GEOG模板中轉換的所有KRAINA_GEOG節點。

這是樣式表：

<?xml version="1.0" encoding="UTF-8"?> 
<xsl:stylesheet 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    version="1.0"> 

    <xsl:output indent="yes"/> 

    <xsl:variable name="svg-width" select="1200" /> 
    <xsl:variable name="svg-height" select="900" /> 
    <xsl:variable name="max-bar-length" select="$svg-width - 400" /> 

    <xsl:variable name="bar-height" select="20" /> 
    <xsl:variable name="bar-spacing" select="10" /> 
    <xsl:variable name="bar-start" select="200" /> 

    <xsl:variable name="max-powierzchnia" select="//POWIERZCHNIA[not(. &lt; //POWIERZCHNIA)]" /> 

    <xsl:template match="SWIAT"> 
     <svg viewBox="0 0 {$svg-width} {$svg-height}" width="{$svg-width}px" height="{$svg-height}px"> 
      <g id="bar-chart" font-size="16" transform="translate(20,100)"> 
       <xsl:apply-templates select="//KRAINA_GEOG"> 
        <xsl:sort order="descending" select="POWIERZCHNIA" /> 
       </xsl:apply-templates> 
      </g> 
     </svg> 
    </xsl:template> 

    <xsl:template match="KRAINA_GEOG"> 
     <xsl:variable name="bar-width" select="POWIERZCHNIA * $max-bar-length div $max-powierzchnia" /> 
     <g id="bar_{position()}" 
      transform="translate(0, {(position() - 1) * ($bar-height + $bar-spacing)})"> 
      <text x="0" y="{($bar-height + $bar-spacing) div 2}"><xsl:number format="1. " value="position()"/> 
       <xsl:value-of select="NAZWA"/></text> 
      <rect x="{$bar-start}" y="0" width="{$bar-width}" height="{$bar-height}" fill="lightgray"/> 
      <text x="{$bar-width + $bar-start + 5}" y="{($bar-height + $bar-spacing) div 2}"><xsl:value-of select="POWIERZCHNIA"/></text> 
     </g> 
    </xsl:template> 

</xsl:stylesheet> 

這是導致SVG你當你運行你的源XML +通過XSLT處理器這個XSL樣式表：http://codepen.io/helderdarocha/pen/iJrFb

您也可以嘗試生成它在飛行中，保存XSLT樣式表上面的文件（svg-graph.xsl），加入<?xml-stylesheet處理指令的XML：

<?xml version="1.0" encoding="UTF-8"?> 
<?xml-stylesheet type="text/xsl" href="svg-graph.xsl"?> 
<SWIAT> 
    <KRAINA_GEOG TYP="Pobrzeze"> 
     <NAZWA>Południowobałtyckie</NAZWA> 
     <POWIERZCHNIA>19000</POWIERZCHNIA> 
... 

並將其加載到FireFox等瀏覽器中。