d3.js/LaTeX翻译

Question

我正在用d3.js制作科学数据可视化，因此作为科学界的一员，我是一个"LaTeX-er“，但对D3.js非常陌生……

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

​

​

这等同于：

文本{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/