Translation d3.js / LaTeX

Question

I create a visualization of scientific data in d3.js, and therefore, as a scientific community, I am "LaTeX-er", but very new to d3.js ...

I want to include in my visualization (if anyone is familiar with LaTeX):

Which corresponds to:

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

How can I translate it for rendering for d3.js?

Answer 1

Your LaTeX has a couple of bugs. The corrected version:

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

Then you can use the 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}); 

NOTIFICATION:

In javascript strings you need to double everything \ your LaTeX code!

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