cytoscape.js - 如何在 cytoscape.js 中使用 z-index？

Question

我正在使用 cytoscape.js。我有一些叠加的节点，我正在尝试修复它们的 z 索引，以便我可以将后面的节点放在前面。我不认为这是正确的。我做了两个例子:

1) http://jsfiddle.net/VzCZm/2/在这些中，我使用了库的父属性，我将节点“n2”的 z-index 固定为 10，当您在节点“father3”内移动节点“n1”和“n2”时，您可以看到这些比“n1”更暗，但仍然位于“father3”节点后面。我怎样才能把它放在前面？

ready: function(){
   window.cy = this; 
   cy.nodes("[id='n2']").css('z-index', 10);
}

2) http://jsfiddle.net/6tKdD/在这些示例中，我没有使用父属性，因为我认为这可能是问题所在，而是使用普通节点并手动叠加它们。在这种情况下，您可以操纵 z 索引，它们工作得很好，现在唯一的问题是边缘绘制在节点后面，因此您看不到它们，即使您更改它们的 z 索引，您仍然看不到它们他们。如果将“George”或“Elaine”节点移到“Jerry”节点之外，您可以看到这两个节点之间有一条边。如何使边缘可见？

ready: function(){
  window.cy = this;
  cy.nodes("[id='j']").css("z-index", 1);
  cy.nodes("[id='g']").css("z-index", 3);
  cy.nodes("[id='e']").css("z-index", 3);
  cy.edges("[source='g']").css("z-index", 2);
  cy.nodes("[id='k']").css("z-index", 0);
}

非常感谢您的帮助!

安德烈娜

Answer 1

修正:有用于对 z 排序进行细粒度控制的属性。如果您愿意，您可以设置任何顺序。默认值如下面的 OP 中指定的那样。

属性:

• z 索引
• z-index-比较
• z-复合深度

文档:http://js.cytoscape.org/#style/visibility

—

操作:

与 HTML 一样，设置 z-index 不是全局的:它是相对于父节点的。出于可访问性的原因，边缘被绘制在节点后面。如果要显示边缘，请勿将节点放在边缘前面。请注意，复合节点之间的边是一个异常(exception)。