D3 Examples - Reusable Component: MathJax label

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <title>Line Chart</title>        
    <link href="MathJax.css" rel="stylesheet" type="text/css">    
  </head>
  <body>
<script type="text/javascript" src="https://d3js.org/d3.v2.js"></script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/mathjax.js?config=tex-ams-mml_svg"></script>
<script type="text/javascript" src="mathjaxlabel.js"></script>       
<script type="text/javascript">
  var margin = {"top": 100, "right": 100, "bottom": 100, "left": 100}, 
  height = 300,
  width = 300,
  title = ["\\(Title\\)","\\(sin(\\phi)\\)"],
  ylabel = ["\\(Y Label\\)","\\(Random LaTex   ^{4}_{2}He\\)"],
  xlabel = ["\\(This is not getting positioned correctly\\)","\\(Should be at the bottom of the margin\\)"];
  var gEnter = d3.select("body")
    .append("svg").attr("width",500).attr("height",500)
    .append("g").attr("class","container");
  gEnter.append("rect").attr("width",300).attr("height",300).attr("transform","translate("+margin.left+","+margin.top+")");
​
  // X Label
  var xlbl = mathJaxLabel().width(width).height(margin.bottom);
  gEnter.append("g")
        .attr("class","xlabel")
        .datum(xlabel)
        .attr("transform", "translate("+margin.left+","+(margin.top + 300) +")");
  d3.selectAll("g.xlabel").call(xlbl);
​
  // Y Label
  var ylbl = mathJaxLabel().width(height).height(margin.left);
  gEnter.append("g")
         .attr("transform","rotate(-90)")
         .attr("class","ylabel")
         .datum(ylabel)
         .attr("transform", "translate(0,"+(margin.top + 300)+")rotate(-90)");
  d3.selectAll("g.ylabel").call(ylbl);
​
  // Title
  var ttl = mathJaxLabel().width(width).height(margin.bottom);
  gEnter.append("g")
        .attr("class","title")
        .datum(title)
        .attr("transform", "translate(100,0)");
  d3.selectAll("g.title").call(ttl);
</script>
</body>
</html>
    