使用d3.js呈现MathML在svg上

Question

我想使用d3.js在svg上呈现MathML方程式。任何人都可以帮助我得到svg的二次方程。我尝试着用异物来取得成功。

Answer 1

我花了一段时间试图使它在JSFiddle中没有成功，但它在我的PC上效果很好。 JSFiddle here。您是否介意尝试以下方法，并让我知道它是否也适用于您？

步骤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不是真的ch再次使用。

我希望它有帮助。

编辑 最后一个的jsfiddle这里：link

感谢

Answer 2

你两个错误

• foreignObject必须有宽/高属性
• MATHML元素必须在MATHML命名空间

修复这些结果在此创建...

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