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

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'

事件，它很好地工作。