我一直在使用 cytoscape.js，在尝试使用图表时遇到了一些问题。
1) 有没有办法通过单击并拖动背景来平移？看起来应该可行，但我完全无法实现。在某些时候，我可能会添加平移缩放，但如果也可以不添加平移缩放，那将会很有帮助。
这是一个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 索引与它们相关)，但节点的视觉顺序似乎没有改变。如果您覆盖两个，它们只是默认将子节点放在父节点之上。
但是，当您单击前景节点时，它们的行为就像它们位于其他节点之上一样。如果您叠加两个并单击重叠部分，它将表现得好像您单击了前景紫色节点，即使它在视觉上位于中景红色下方。当您单击并拖动时，它看起来也正是我想要的样子，当您放开时它就会发生变化。
另一个问题是文本。无论 z 索引或节点关系如何，它都会渗透。
我希望节点实际上是不透明的，并且不让其他节点或文本显示出来。
我知道 z-index 仅相对于父节点，但我认为这会起作用，因为它会影响所有其他选定的节点。看来事实并非如此。还有其他方法可以实现此目的吗？正如它所说，从功能上来说，它似乎确实按照我想要的方式工作。只是视觉上不那么明显。
非常感谢!
最佳答案
(1) 按住背景直至看到事件的平移指示器。您还可以禁用框选择以使保持延迟更快。
(2) 您似乎发现了一个错误。 https://github.com/cytoscape/cytoscape.js/issues/414
关于javascript - 点击时的 cytoscape.js 平移和 z-index/foregrounding 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21296927/