Defining the XSL to Transform XML Content to SVG Presentation
One of the advantages SVG has over other vector graphics formats is that
it is both a well-formed and valid XML format. This enables developers to
leverage many other powerful XML technologies to automatically create SVG
visualizations. XSL is one such technology that enables the creation of style
sheets that, together with an XSLT engine, automatically transform XML data
into SVG presentations. Listing 12.6 shows an XSL style sheet that transforms
any XML loan document into an SVG loan visualization in the format shown in
Listing 12.4. Furthermore, the SVG result of this transformation also uses the
CSS document shown in Listing 12.5, so not only are we able to generate SVG
visualizations automatically for all loans, but we can do so with consistent
and eas-ily maintainable styles. Following Listing 12.6, some of the XSL
aspects specifically related to SVG are discussed. For more information on XSL,
see Chapter 9, “Transforming XML.”
LISTING 12.6 Loan.xsl—Sample
Loan XSL
<?xml version=”1.0”?>
<xsl:stylesheet version=”1.0” xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”
➥ xmlns:xlink=”http://www.w3.org/1999/xlink”>
<xsl:output
method=”xml” version=”1.0” encoding=”iso-8859-1” indent=”yes”
➥ doctype-public=”-//W3C//DTD
SVG 1.0//EN” doctype-system=
➥ ”http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd”/>
<xsl:param
name=”plotTopLeftX”>68.5</xsl:param> <xsl:param
name=”plotTopLeftY”>11.7</xsl:param> <xsl:param
name=”plotWidth”>384</xsl:param> <xsl:param
name=”plotHeight”>224</xsl:param>
<xsl:template
match=”/loan”>
<xsl:processing-instruction name=”xml-stylesheet”>href=”Loan.css”
➥ type=”text/css”</xsl:processing-instruction>
<svg
width=”485” height=”290”>
<rect
x=”0” y=”0” width=”485”
height=”290” class=”border”/>
<rect
x=”68.5” y=”11.7” width=”384”
height=”224” class=”plotbox”/>
<line x1=”67” y1=”58.8” x2=”451” y2=”58.8”
class=”axisvalue”/> <line x1=”67” y1=”103.6” x2=”451” y2=”103.6”
class=”axisvalue”/> <line x1=”67” y1=”148.4” x2=”451” y2=”148.4”
class=”axisvalue”/> <line x1=”67” y1=”193.2” x2=”451” y2=”193.2”
class=”axisvalue”/> <line x1=”143.8” y1=”14” x2=”143.8” y2=”238”
class=”axisvalue”/> <line x1=”220.6” y1=”14” x2=”220.6” y2=”238”
class=”axisvalue”/> <line x1=”297.4” y1=”14” x2=”297.4” y2=”238”
class=”axisvalue”/> <line x1=”374.2” y1=”14” x2=”374.2” y2=”238”
class=”axisvalue”/>
<text x=”10px” y=”155px” transform=”rotate(-90)
translate(-220,-115)” ➥ class=”axis”>Principal
Dollars</text>
<text x=”227.08px” y=”283.289px”
class=”axis”>Month</text> <text x=”67px” y=”258.072px”
class=”axisvalue”>0</text>
<text x=”55px” y=”238px” text-anchor=”end”
class=”axisvalue”>0.00</text> <text x=”451px” y=”258.072px”
class=”axisvalue”><xsl:value-of
➥ select=”@termInMonths”/></text>
<text x=”55px” y=”14px” text-anchor=”end”
class=”axisvalue”><xsl:value-of ➥
select=”@principal”/></text>
<polyline class=”data”>
<xsl:attribute name=”points”>
<xsl:for-each
select=”payment”>
<xsl:variable name=”paymentX”><xsl:value-of select=”(
@monthIndex * ➥ $plotWidth div ../@termInMonths
) + $plotTopLeftX”/></xsl:variable>
LISTING 12.6 continued
<xsl:variable
name=”paymentY”><xsl:value-of
select=”$plotHeight * (1 -
➥ ( @principalOutstanding div ../@principal )) + $plotTopLeftY”/> ➥ </xsl:variable>
<xsl:value-of
select=”$paymentX”/>,<xsl:value-of ➥
select=”$paymentY”/><xsl:text> </xsl:text>
</xsl:for-each>
</xsl:attribute>
</polyline>
<xsl:for-each
select=”payment”>
<xsl:variable
name=”paymentX”><xsl:value-of select=”( @monthIndex * ➥ $plotWidth div ../@termInMonths ) +
$plotTopLeftX”/></xsl:variable>
<xsl:variable
name=”paymentY”><xsl:value-of
select=”$plotHeight * (1 -
➥ ( @principalOutstanding div ../@principal )) + $plotTopLeftY”/> ➥ </xsl:variable>
<circle r=”4” class=”datapoint”>
<xsl:attribute name=”cx”><xsl:value-of
select=”$paymentX”/> ➥ </xsl:attribute>
<xsl:attribute name=”cy”><xsl:value-of
select=”$paymentY”/> ➥ </xsl:attribute>
</circle>
</xsl:for-each>
</svg>
</xsl:template>
</xsl:stylesheet>
To simplify the maintenance of the XSL, it is a good idea to put any
constants at the top of the document in the form of xsl:param variables, as shown here:
<xsl:param
name=”plotTopLeftX”>68.5</xsl:param>
These constants are referred to from xsl:value-of elements elsewhere in the XSL. For example, the following code shows
how the value of the parameter named plotTopLeftX
is used in a formula to compute the value of a new XSL variable named
<xsl:variable name=”paymentX”><xsl:value-of select=”(
@monthIndex * ➥ $plotWidth div ../@termInMonths
) + $plotTopLeftX”/></xsl:variable>
The CSS document in Listing 12.5 is referenced from the SVG result of
the transforma-tion using the following xsl:processing-instruction:
<xsl:processing-instruction name=”xml-stylesheet”>href=”Loan.css” ➥ type=”text/css”</xsl:processing-instruction>
For each payment in the XML loan document being transformed with the XSL
in Listing 12.6, the following code adds a point to the polyline element used to visualize the
loan plot:
<polyline class=”data”>
<xsl:attribute name=”points”>
<xsl:for-each
select=”payment”>
<xsl:variable
name=”paymentX”><xsl:value-of select=”( @monthIndex * ➥ $plotWidth div ../@termInMonths ) +
$plotTopLeftX”/></xsl:variable>
<xsl:variable
name=”paymentY”><xsl:value-of
select=”$plotHeight * (1 -
➥ ( @principalOutstanding div ../@principal )) + $plotTopLeftY”/> ➥ </xsl:variable>
<xsl:value-of
select=”$paymentX”/>,<xsl:value-of ➥
select=”$paymentY”/><xsl:text> </xsl:text>
</xsl:for-each>
</xsl:attribute>
</polyline>
The formulas in this XSL use the location and dimensions of the loan
plot, as defined in the xsl:param elements earlier in the XSL document, together with a knowledge of the
SVG coordinate system shown in Figure 12.3 to determine the x and y coordinates
of each payment point and to store them in the variables paymentX and paymentY. The val-ues of these variables
are then output to the value of the points attribute of the SVG polyline element.
Similarly, the following XSL code creates the SVG circle elements that represent each of
the payment data points in the loan plot:
<xsl:for-each
select=”payment”>
<xsl:variable
name=”paymentX”><xsl:value-of select=”( @monthIndex * ➥ $plotWidth div ../@termInMonths ) +
$plotTopLeftX”/></xsl:variable>
<xsl:variable
name=”paymentY”><xsl:value-of
select=”$plotHeight * (1 -
➥ ( @principalOutstanding div ../@principal )) + $plotTopLeftY”/> ➥ </xsl:variable>
<circle r=”4” class=”datapoint”>
<xsl:attribute name=”cx”><xsl:value-of
select=”$paymentX”/> ➥ </xsl:attribute>
<xsl:attribute name=”cy”><xsl:value-of
select=”$paymentY”/> ➥ </xsl:attribute>
</circle>
</xsl:for-each>
Related Topics
Privacy Policy, Terms and Conditions, DMCA Policy and Compliant
Copyright © 2018-2023 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.