【发布时间】：2014-01-24 01:15:15
【问题描述】：
我一直在使用 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 仅相对于父节点，但我认为这会起作用，因为它会影响所有其他选定的节点。似乎情况并非如此。有没有其他方法可以做到这一点？正如它所说，从功能上讲，它似乎确实按我的意愿工作。只是视觉上没有。
非常感谢！
【问题讨论】：
标签： javascript z-index cytoscape.js