如何在cytoscape节点的qtip内使用mathjax

如何解决如何在cytoscape节点的qtip内使用mathjax

如何在cytoscape节点的qtip中使用Mathjax库？

在下面的示例代码中，单击节点顶部时会显示工具提示，但不会呈现Mathjax。

如何解决此问题，以便等式也显示在工具提示中？ @peterkrautzberger在this answer中提出的解决方案可能是一个选择，但我没有设法使其适应这种情况。

已编辑：@ dipenshah的回答解决了原始问题。但是，在扩展示例代码以允许动态Mathjax内容时，它似乎不起作用。如果不是从工具提示中获得固定文本，而是从节点定义中的元素txt提取文本，则不呈现Mathjax。我已经修改了下面的代码以显示它。

$(function(){
    var cy = window.cy = cytoscape({
        container: document.getElementById('cy'),ready: function(){
        },elements: {
            nodes: [
                { data: { id: '1',name: 'Node 1',txt: '$$\\int f(x)dx=\\frac{x^2+y}{2x} + C\\,.$$' },},{ data: { id: '2',name: 'Node 2',txt: '$$\\frac{\\partial x^2}{dx}\\,}
            ],edges: [
                { data: { source: '1',target: '2' } }
            ]
        }
    });

    cy.elements().nodes().qtip({
        content: function(){ return this.data('txt') },position: {
            my: 'top center',at: 'bottom center'
        },style: {
            classes: 'qtip-bootstrap',tip: {
                width: 16,height: 8
            }
        },events: {
      render: function() {
        MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
      }
    }
    });
});

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.js"></script>
<script src="https://unpkg.com/cytoscape-qtip@2.7.1/cytoscape-qtip.js"></script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<h3>Cytoscape qtip demo</h3>

<p>
$$\int f(x)dx=\frac{x^2+y}{2x} + C\,.$$
</p>

<div id="cy" style="width:50%; height:50%; position:absolute;"></div>

解决方法

基于更新的问题： 对于动态内容，无法保证MathJax开始处理时，同一事件回调中将使用dom元素，因此在这里，我们可以使用setTimeout在当前Javascript调用完成处理后将处理排队：

render: function(event,api) {
  var tooltip = api.elements.tooltip;
  tooltip.bind('tooltipshow',function(event,api) {
    setTimeout(() => MathJax.Hub.Queue(["Typeset",MathJax.Hub]));
  });
}

让我们看看：

$(function() {
  var cy = window.cy = cytoscape({
    container: document.getElementById('cy'),ready: function() {},elements: {
      nodes: [{
          data: {
            id: '1',name: 'Node 1',txt: '$$\\int f(x)dx=\\frac{x^2+y}{2x} + C\\,.$$'
          },},{
          data: {
            id: '2',name: 'Node 2',txt: '$$\\frac{\\partial x^2}{dx}\\,}
      ],edges: [{
        data: {
          source: '1',target: '2'
        }
      }]
    }
  });

  cy.elements().nodes().qtip({
    content: function() {
      return this.data('txt');
    },position: {
      my: 'top center',at: 'bottom center'
    },style: {
      classes: 'qtip-bootstrap',tip: {
        width: 16,height: 8
      }
    },events: {
      render: function(event,api) {
        var tooltip = api.elements.tooltip;
        tooltip.bind('tooltipshow',api) {
          setTimeout(() => MathJax.Hub.Queue(["Typeset",MathJax.Hub]));
        });
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">

<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/cytoscape-qtip@2.7.1/cytoscape-qtip.js"></script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

<h3>Cytoscape qtip demo</h3>

<p>
  $$\int f(x)dx=\frac{x^2+y}{2x} + C\,.$$
</p>

<div id="cy" style="width:50%; height:50%; position:absolute;"></div>

原始答案：

您可以在render上使用qtip回调，以使MathJax了解更新：

events: {
  render: function() {
    MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
  }
}

结帐更新的代码：

$(function() {
  var cy = window.cy = cytoscape({
    container: document.getElementById('cy'),name: 'Node 1'
          },name: 'Node 2'
          },target: '2'
        }
      }]
    }
  });

  var qtip = cy.elements().nodes().qtip({
    content: '$$\int f(x)dx=\frac{x^2+y}{2x} + C\,.$$',events: {
      render: function() {
        MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">

<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/cytoscape-qtip@2.7.1/cytoscape-qtip.js"></script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

<h3>Cytoscape qtip demo</h3>

<p>
  $$\int f(x)dx=\frac{x^2+y}{2x} + C\,.$$
</p>

<div id="cy" style="width:50%; height:50%; position:absolute;"></div>