Question

我一直在使用cytoscape.js，在尝试使用这些图时我遇到了一些问题。

1）有没有办法通过点击并拖动背景进行平移？它似乎应该有效，但我完全无法得到它。在某些时候，我可能会添加panzoom，但是如果可以做到这一点，那将会有所帮助。

这是jsfiddle，其中包含我的代码的简化版本。 zoomEnabled: false工作正常，但panningEnabled: true似乎不是。

2）在将节点层叠在一起时，我遇到了一些问题。

我点击它们“前景化”节点，以及之前点击过的“中间点”节点。因此，当最近点击的节点与任何其他节点重叠时，它应该位于顶部。在最新的节点之前点击的节点应位于除前置节点之外的所有节点之上。

我一直在尝试并且未能使用z-index来实现这一目标。这是我的点击功能：

cy.on('tap', 'node', function(e){
    var curr_node = e.cyTarget; 
    var prev_foci = cy.elements('node.focused');

    prev_foci.not(curr_node).addClass('less-focused');

    if (curr_node.hasClass('less-focused')){ //if it's been middlegrounded, foreground
      curr_node.removeClass('less-focused');
    } 
    else { //otherwise, swap between foreground and background
      curr_node.toggleClass('focused');
    }
});

我的风格看起来像

.selector('.focused')
  .css({
    'width' : 200,
    'height' : 200,
    'background-color' : "#505", 
    'z-index' : 4,
    'border-width' : "2px",
    'border-color' : "#999",
  })
.selector('.less-focused')
  .css({
    'background-color' : "#a00",
    'z-index' : 3,
  }),

这是jsfiddle。

我用彩色编码，以便更容易看到发生了什么。虽然我相信我的逻辑是正确的（颜色按照我喜欢的方式切换，并且z-index与它们相关联），但节点的视觉顺序似乎没有改变。如果覆盖两个，它们只是默认将子节点放在父节点之上。

但是，当您点击它们时，前台节点的行为就像它们位于其他节点之上一样。如果您叠加两个并单击重叠，则其行为就像您单击了前景紫色节点一样，即使它在视觉上位于中间接地的红色下方。当你点击并拖动它时，它看起来也就像我想要的那样，当你放手时它就会发生变化。

另一个问题是文本。无论z-index或节点关系如何，它都会渗透。

我希望节点有效地不透明，不要让其他节点或文本显示出来。

我知道z-index只相对于父级，但我认为这会起作用，因为它会影响所有其他选定的节点。似乎情况并非如此。有没有其他方法来实现这一目标？正如它所说的那样，在功能上，它似乎确实按我的意愿工作。只是不在视觉上。

非常感谢！

Answer 1

（1）保持背景，直到看到活动的平移指示器。您也可以禁用方框选择以使保持延迟更快。

（2）您好像发现了一个错误。 https://github.com/cytoscape/cytoscape.js/issues/414

单击时，cytoscape.js pan和z-index / foregrounding元素

1 个答案: