Header Requirements to Put MathJax in d3-tips

Question

I have been hacking away at javascript library d3.js with some help from more seasoned characters at school. I am sort of copy and pasting the bl.ocks.org examples together to create a visualization for my network growth model. I am using d3-tips to have different node characteristics shown upon visualization.

Including this in the header allows me to use the standard MathJax formatting in the html body, but it doesn't work with d3-tips:

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    processEscapes: true
  }
});
</script>

I have been googling around and looking at the examples of one blogger in particular, but his examples are way too cryptic for my limited background. Here are said examples from the blogger:

Resource 1

Resource 2

THANK YOU!

Answer 1

Couple things:

1.) When you add MathJax content on the fly, it needs to be re-queued to process it.

2.) The d3.tip.js seems to be eating the \ escape character used in LaTeX so you'll need to double escape it.

Putting this together:

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    setTimeout(function(){MathJax.Hub.Queue(["Typeset",MathJax.Hub]);}, 10);
    return "$ax^2 + bx + " + d.frequency + " = 0$" + "<br/>" + "\\(x_1 = 132\\)";
})

Example here.