问题描述
如何在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>