使用Twitter自举标签内Cytoscape的渲染(Using Cytoscape renderi

我使用两个Cytoscape的图表Twitter的引导内侧3片（每片一个图）。

我的问题是，只有活跃的标签是渲染器，当我选择隐藏选项卡这图不是渲染（如果我打开的Firefox / Firebug的接近（含F12）的图形渲染）。

我试图解决这个：

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


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

没有成功。

该图被加载但不渲染，它来自Cytoscape的或Twitter的引导？

谢谢

萨科

Answer 1:

你要么需要修复引导，因此不使用维度打破隐藏式的（即不使用display: none等），或者你可以强制Cy.js重新计算的尺寸使用可用cy.resize()

请注意，这引起了你的浏览器的限制：

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

（2）浏览器具有用于检测一个DOM元素CSS /尺寸变化没有事件或机构。这个解决办法是非常昂贵的。

Answer 2:

通过maxkfranz答案是好的，但它缺乏对问题的实际解决方案。此外，它是不正确的浏览器没有这样的机制，用于检测CSS的变化 - 你可以使用DOMAttrModified或突变观察（这是大多数浏览器现在处理，使DOMAttrModified过时）。

这里是我的代码-我认为你有你的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);

你可以阅读更多关于突变观察这里