使用 d3.js 在 svg 上渲染 MathML

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 已不再被广泛使用。

希望对你有帮助。

编辑 最后是一个 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