在 twitter boostrap 选项卡中使用 Cytoscape 渲染答案

【问题标题】：Using Cytoscape rendering inside twitter boostrap tabs在 twitter boostrap 选项卡中使用 Cytoscape 渲染
【发布时间】：2019-03-07 15:41:12
【问题描述】：

我在 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？

谢谢

尼古拉斯

【问题讨论】：

标签： twitter-bootstrap cytoscape.js

【解决方案1】：

您要么需要修复 Bootstrap，使其不使用尺寸破坏隐藏样式（即不要使用 display: none 等），要么可以强制 Cy.js 使用 cy.resize() 重新计算可用尺寸。

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

(1) 某些隐藏样式的DOM元素不能有维度查询。

(2) 浏览器没有用于检测 DOM 元素上的 CSS/尺寸变化的事件或机制。解决此问题的方法非常昂贵。

【讨论】：

太好了，效果很好;-)。请注意：不要在活动选项卡（显示的第一个选项卡）上对 cytoscape 实例使用 resize() 调用，在这种情况下，图形不会重新出现...
第 (2) 点不正确（也不是你写这个答案的时候——见我的答案），但是调整大小的提示是正确的，这给了我进一步寻找的灵感，所以无论如何+1 :-)
我正在使用 ngx-bootstrap 并面临完全相同的问题。我无法使用提供的解决方案解决它。

【解决方案2】：

maxkfranz 的答案很好，但缺乏实际的解决方案。此外，浏览器没有检测 CSS 更改的机制是不正确的——您可以使用 DOMAttrModified 或 Mutation Observers（现在大多数浏览器都处理它们并且使 DOMAttrModified 过时了）。

这是我的代码 - 我假设您在 Bootstrap 的标签 #cyTab 中有您的 cytoscape.js 容器，并使用标准 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);

你可以阅读更多关于突变观察者here

【讨论】：

突变观察者是不够的，除非你能够观察到可能改变风格的一切的变化。您的示例捕获了常见的类列表案例，但还有更多。一般数据属性更改和 DOM 层次结构更改都会影响样式。还需要考虑样式表的添加/删除和（异步）加载。最后，Cytoscape.js 与 IE9 兼容——因此仍然需要 cy.resize() 来实现兼容性。尽管github.com/cytoscape/cytoscape.js/issues/1284 我添加了一个问题来改进它
我不同意您的评论与此问题中描述的特定案例的相关性 - 引导选项卡切换使用 active in。 DOM 层次结构？当然，我们可以将 cytoscape 节点移动到完全不同的位置，这将使我的机制无效，但是如果开发人员不想在脚上开枪，我的解决方案是可以的 :-)。
提问者以外的其他用户往往会从搜索中看到问题——而这些用户是一年前提出问题的焦点。他们的案例与提问者的案例具有不同程度的相似性，因此最好有一个通用的解决方案来更好地为整个社区服务。我确信开发人员完全有能力挑选与他们的特定案例相关的内容。

【解决方案3】：

我在 Bootstrap modal 中也有同样的渲染问题，并且批准的答案解决了这个问题，我已经使用了

cy.resize()

里面

'shown.bs.modal'

事件，它工作得很好。

【讨论】：