Mathjax 不呈现内联标签

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);

我只是想在这个阶段渲染圆周率，但即使那样也行不通。 Mathjax 肯定在做一些事情，因为当我查看源代码时，我在刻度值标签上看到了这个：

<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

我很惊讶这是多么困难。虽然 MathJax 有一个 SVG renderer，但它将结果 svg 嵌入到 html 中。我在这里想出的技巧是在渲染后将其移回刻度线。

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>

编辑

我扩展了这个示例 on this block，其中我使用 MathJax 和 d3 来标记圆的弧度。

Mathjax 不呈现内联标签

Mathjax not rendering inline labels

javascript

mathjax

d3.js