Rendering MathML on svg using d3.js - svg

Question

I am trying to render MathML equations on svg using d3.js. Can anyone help me getting a quadratic equation on svg. I tried doing it using foreign object with no success.

Answer 1

I spent quite some time trying to make it work in a JSFiddle with no success, but it works great on my PC. JSFiddle here. Do you mind trying the following and let me know if it works with you too?
Step 1. Load MathJax
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
Step 2. Use this code to append a foreignObject
var svg = d3.select("body").append("svg").attr("width",400).attr("height",400)
var text = svg.append("foreignObject").attr("width",100).attr("height",100)
text.text("$$ x = \\sum_{i \\in A} i^{2} $$")
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
However, if you still prefer MathML, then you can use the following:
text.html("<math display=\"block\"><mrow><mi>x</mi><mo>=</mo><mfrac><mrow><mo>−</mo><mi>b</mi><mo>±</mo><msqrt><mrow><msup><mi>b</mi><mn>2</mn></msup><mo>−</mo><mn>4</mn><mi>a</mi><mi>c</mi></mrow></msqrt></mrow><mrow><mn>2</mn><mi>a</mi></mrow></mfrac></mrow></math>")
I know I am adding more scripts for you to load, but my understanding is that MathML is not really much used any more.
I hope it helps.
EDIT
Finally a JSFiddle here: link
Thanks

Answer 2

You've two bugs
foreignObject must have width/height attributes
mathml elements must be created in the mathml namespace
Fixing these results in this...
d3.ns.prefix.mathml = "http://www.w3.org/1998/Math/MathML";
var foreignObject = d3.select("body")
.append("svg")
var x = foreignObject.append("foreignObject")
.attr("requiredExtensions", "http://www.w3.org/1999/xhtml")
.attr("width", "100")
.attr("height", "100")
var text = x.append("mathml:mo")
var row = x.append("mathml:mrow")
row.append("mathml:mi").text("a")
row.append("mathml:mo").text('\u2062')
var msup = row.append("msup")
msup.append("mathml:mi").text("x")
msup.append("mathml:mi").text("2")
row.append("mathml:mo").text("+")
row.append("mathml:mi").text("b")
row.append("mathml:mo").text('\u2062')
row.append("mathml:mi").text('x')
row.append("mathml:mo").text('+')
row.append("mathml:mi").text('c')
or as a fiddle