function mathJaxLabel(){ //Adds a foreignObject to store mathJax Text, assumes data is a string formatted for mathJax // Refer to this for mathJax rerendering voodoo: view-source:http://cdn.mathjax.org/mathjax/latest/test/sample-dynamic.html var height, width; function label(selection){ selection.each(function(data) { var container = d3.select(this), QUEUE = MathJax.Hub.queue; var fo = container.selectAll(".label").data(function(d){return [d]}), foEnter = fo.enter().append("foreignObject") .attr("class","label") .append("xhtml:body") .attr("xmlns","http://www.w3.org/1999/xhtml") .append("xhtml:div") .attr("class","holder") .append("xhtml:div") .attr("class","lines") forUpdate = d3.transition(fo).attr("height",height).attr("width",width), bUpdate = d3.transition(fo.selectAll("body")).style("height",height+"px").style("width",width+"px"), foExit = d3.transition(fo.exit()).remove(); function toggleDisplay(selection){ selection.each(function() { var el = d3.select(this), state = el.style("display") el.style("display",function(){ return (state == "block")?"none":"block";})})}; function updateMath(item,i){ //Escape whitespace so that user doesn't have to var newtext = item.select(".input").property("value").split(" ").join("\\ "), math = MathJax.Hub.getAllJax(item.selectAll("div.div").node())[0], data = container.datum(); data[0][i] = "\\("+newtext+"\\)"; QUEUE.Push(["Text",math,newtext], function(){item.selectAll(".div,.input").call(toggleDisplay)}); container.datum(data);} //each line var nl = container.selectAll("body div.lines").selectAll("div.newline").data(function(d){return d}), nlEnter = nl.enter().append("xhtml:div") .attr("class","newline") .attr("align","center"); nlExit = nl.exit().remove(); //mJax holder var mjax = nlEnter.append("xhtml:div") .attr("class","div") .attr("align","center") .style("display","none") .html(function(d){return d.split(" ").join("\\ ")}) ; //Input var inpt = nlEnter.append("xhtml:input") .attr("class","input") .style("display","none") .property("value",function(d){return d.slice(-(d.length -2),(d.length-2))}); //Display math elements once initialized. QUEUE.Push(function () { math = MathJax.Hub.getAllJax(container.selectAll("div.div")[0][0])[0]; container.selectAll("div.div").style("display","block"); }); //Behaviours container.selectAll("div.newline") .on("dblclick",function(d,i){ var el = d3.select(this); (el.select(".input").style("display") !== "none")?updateMath(el,i):el.selectAll(".div,.input").call(toggleDisplay)}) .each(function(d,i){ var el = d3.select(this), id = i; el.selectAll(".input") .on("change",function(){updateMath(el,id)})}); }); }; label.width = function(_) { if (!arguments.length) return width; width = _; return label; }; label.height = function(_) { if (!arguments.length) return height; height = _; return label; }; return label; }