d3.js/LaTeX 翻译

Question

我正在 d3.js 中生成科学数据可视化，因此来自科学界我是“LaTeX-er”但对 d3.js 非常陌生......

我想在我的可视化中包含以下内容(如果有人熟悉 LaTeX):



这相当于:

$\text{SFR}$=10.10$\text{M}_{\odot}$ ${\text{ yr}}^{-1}$

我将如何翻译它以渲染 d3.js viz？

Answer 1

你的 LaTeX 有几个错误。修正版:

\text{SFR}_{[\textup{O\ II}]}=10.10\text{M}_{\odot}\ {\text{ yr}}^{-1}

然后，您可以使用 svg:foreignObject构造函数:

//The SVG Container
var svgContainer = d3.select("body").append("svg")
     .attr({"width": 400, "height": 400});

//foreignObject
var latex_raw = "\\text{SFR}_{[\\textup{O\\ II}]}=10.10\\text{M}_{\\odot}\\ {\\text{ yr}}^{-1}";
var latex_render_url = "http://latex.codecogs.com/gif.latex?";
var latex_query = encodeURI(latex_raw);
var latex = svgContainer.append("foreignObject")
     .attr({
         "x": 100,
         "y": 60,
         "width": 400,
         "height": 200,
         "requiredFeatures": "http://www.w3.org/TR/SVG11/feature#Extensibility"})
     .append("xhtml:body").attr({
         "margin": 0,
         "padding": 0,
         "width": 400,
         "height": 200})
     .append("img").attr({
         "src": latex_render_url + latex_query});

注意:

在 javascript 字符串中，您必须将所有 \ 加倍。你的 LaTeX 代码!

演示: http://jsfiddle.net/4ksjek94/1/