Question

我正在尝试沿x轴渲染内联mathjax标签here。

这是一个反应网站，当加载DOM时，我有这个代码，我不得不使用setTimeout，因为在添加延迟之前MathJax不可用：

setTimeout(() => {
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      processEscapes: true
    }
  });
  MathJax.Hub.Queue(["Typeset", MathJax.Hub,], d3.select('.x.axis')[0][0]);
}, 500);

我使用以下代码创建这样的标签：

const xAxis = d3.svg.axis()
        .orient('bottom')
        .tickValues(xTickValues)
        .tickFormat((x) => '$\pi$')
        .scale(xScaleAxis);

我只是想在这个阶段渲染pi，但即使这样也行不通。 Mathjax肯定在做某事，因为当我查看源代码时，我在tick值标签上看到了这一点：

<text dy=".71em" y="9" x="0" style="text-anchor: middle;"><span class="MathJax_Preview" style="color: inherit;"></span><span id="MathJax-Element-1-Frame" class="mjx-chtml MathJax_CHTML" tabindex="0" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot;><mi>p</mi><mi>i</mi></math>" role="presentation" style="font-size: 116%; position: relative;"><span id="MJXc-Node-1" class="mjx-math" role="math" aria-hidden="true"><span id="MJXc-Node-2" class="mjx-mrow"><span id="MJXc-Node-3" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.249em; padding-bottom: 0.496em;">p</span></span><span id="MJXc-Node-4" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.434em; padding-bottom: 0.311em;">i</span></span></span></span><span class="MJX_Assistive_MathML" role="presentation"><math xmlns="http://www.w3.org/1998/Math/MathML"><mi>p</mi><mi>i</mi></math></span></span><script type="math/tex" id="MathJax-Element-1">pi</script></text>

但没有显示任何内容。

Answer 1

我很惊讶这是多么困难。虽然flatten有一个SVG renderer，但它会将生成的flatten嵌入到html中。我在这里提出的黑客攻击是在它被渲染后将其移回到刻度线中。

MathJax

完整代码：

＆＃13;

svg

＆＃13;

<强> EDITS

我已扩展此示例on this block，我使用setTimeout(() => { MathJax.Hub.Config({ tex2jax: { inlineMath: [ ['$','$'], ["\$","\$"] ], processEscapes: true } }); MathJax.Hub.Register.StartupHook("End", function() { setTimeout(() => { svg.selectAll('.x>.tick').each(function(){ var self = d3.select(this), g = self.select('text>span>svg'); g.remove(); self.append(function(){ return g.node(); }); }); }, 1); }); MathJax.Hub.Queue(["Typeset", MathJax.Hub,], d3.select('.x.axis').node()); }, 1);和<!DOCTYPE html> <meta charset="utf-8"> <style> .axis { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } </style> <body> <script src="//d3js.org/d3.v3.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_SVG"> </script> <script> var margin = { top: 10, right: 10, bottom: 10, left: 10 }, width = 500 - margin.left - margin.right, height = 200 - margin.top - margin.bottom; var x = d3.scale.linear() .domain([1,5]) .range([0, width]); var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom") .tickFormat((x) => '$\\pi$') var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height/2 + ")") .call(xAxis); setTimeout(() => { MathJax.Hub.Config({ tex2jax: { inlineMath: [ ['$','$'], ["\$","\$"] ], processEscapes: true } }); MathJax.Hub.Register.StartupHook("End", function() { setTimeout(() => { svg.selectAll('.x>.tick').each(function(){ var self = d3.select(this), g = self.select('text>span>svg'); g.remove(); self.append(function(){ return g.node(); }); }); }, 1); }); MathJax.Hub.Queue(["Typeset", MathJax.Hub,], d3.select('.x.axis').node()); }, 1); </script>来标记圆的弧度。

Mathjax不渲染内联标签

1 个答案: