使用d3.js在svg上渲染MathML

Question

我试图使用d3.js在svg上渲染MathML方程.任何人都可以帮助我在svg上获得二次方程.我尝试使用异物做到没有成功.

Answer 1

我花了很多时间试图让它在JSFiddle中工作但没有成功,但它在我的电脑上运行得很好. JSFiddle 在这里.您是否介意尝试以下内容并让我知道它是否适合您？

步骤1.加载MathJax

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

步骤2.使用此代码附加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]);

但是,如果您仍然喜欢MathML,那么您可以使用以下内容:

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>")

我知道我正在添加更多脚本供你加载,但我的理解是MathML已经不再使用了.

我希望它有所帮助.

编辑 最后一个JSFiddle:链接

谢谢