d3.js / LaTeX翻译

Question

我在d3.js中创建了一个科学数据可视化，因此来自科学界，我是一个＆＃34; LaTeX-er＆＃34;但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代码的所有\加倍！

DEMO：http://jsfiddle.net/4ksjek94/1/