Question

我在twitter bootstrap 3标签中使用了两个cytoscape图表（每个标签一个图表）。

我的麻烦是只有活动标签是渲染器，当我选择隐藏标签时，它的图形不会渲染（如果我在firefox上打开/关闭firebug（使用F12），则渲染图形。）

我试图通过以下方式解决这个问题：

$('#view-target').cytoscape({
...
ready: function(){
window.cytoscapeTarget = this;
}
});


$('#show-target').on('shown.bs.tab', function (e) {
window.cytoscapeTarget.forceRender();
});

没有成功。

图表已加载但未呈现，是否来自cytoscape或twitter bootstrap？

由于

尼古拉斯

Answer 1

您需要修复Bootstrap，因此它不会使用维度破坏隐藏样式（即不要使用display: none等），或者您可以强制Cy.js重新计算可用的维度cy.resize()

请注意，这是由浏览器中的限制引起的：

（1）具有某些隐藏样式的DOM元素不能查询尺寸。

（2）浏览器没有用于检测DOM元素上的CSS /维度更改的事件或机制。解决此问题的方法非常昂贵。

Answer 2

maxkfranz的答案很好，但缺乏解决问题的实际方法。此外，浏览器没有检测CSS更改的机制 - 您可以使用DOMAttrModified或Mutation Observers（现在由大多数浏览器处理并使DOMAttrModified过时）。

这是我的代码 - 我假设您在Bootstrap的标签cytoscape.js内有#cyTab容器并使用标准的cytoscape变量cy：

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {        
    if(mutation.oldValue == "tab-pane fade" && mutation.target.className == "tab-pane fade active in") {
        console.log('REDRAW!');
        cy.resize();
        cy.layout({name: 'dagre'}); //optional - recalculate whatever layout you wish
    }
  });    
});
var targetNode = $('#cyTab')[0];
var observerConfig = {  
    attributes: true,
    childList: false,
    characterData: false,
    attributeOldValue: true, 
    'attributeFilter': ['class']};
observer.observe(targetNode, observerConfig);

您可以阅读有关Mutation Observers here

的更多信息

Answer 3

我在 Bootstrap模态中也存在相同的渲染问题，并且批准的答案解决了该问题，我已经使用

cy.resize()

内部

'shown.bs.modal'

事件，效果很好。

在twitter引导选项卡中使用Cytoscape渲染

3 个答案: