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/