Рендеринг MathML на svg с использованием d3.js

Question

Я пытаюсь отображать уравнения MathML на svg, используя d3.js. Может ли кто-нибудь помочь мне получить квадратное уравнение на 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 не очень му ch используется больше.

Надеюсь, это поможет.

EDIT Наконец 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