使用 d3.js 在 svg 上渲染 MathML

Question

我正在尝试使用 d3.js 在 svg 上呈现 MathML 方程。任何人都可以帮助我在 svg 上获得二次方程。我尝试使用异物来做，但没有成功。

Answer 1

你有两个错误

foreignObject 必须具有 width/height 个属性
必须在 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

Answer 2

~~我花了很多时间尝试让它在 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

谢谢

使用 d3.js 在 svg 上渲染 MathML

Rendering MathML on svg using d3.js

svg

mathml

d3.js