Question

我正在尝试使用d3.js在svg上渲染MathML方程式。任何人都可以帮助我在svg上获得二次方程。我尝试使用异物进行操作但没有成功。

Answer 1

~~我花了很多时间试图让它在JSFiddle中工作但没有成功，但它在我的电脑上运行良好。~~ 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不再使用了。

我希望它有所帮助。

修改最后一个JSFiddle：link

由于

Answer 2

你有两个错误

foreignObject必须具有宽度/高度属性
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

使用d3.js在svg上渲染MathML

2 个答案: