Question

我是cytoscape.js的新手，当我在同一个div中拥有一个带有我的网络（cy）和一个canvasXpress元素的div时，我遇到了一个奇怪的行为。身体结构是这样的：

$(document).ready(function(){
  
var canvas = $("#canvas")[0];
var ctx = canvas.getContext("2d");
var w = $("#canvas").width();
var h = $("#canvas").height();

ctx.fillStyle = "white";
ctx.fillRect(0, 0, w, h);
ctx.strokStyle = "black";

var snake_array;

create_snake();
function create_snake()
{
  var length = 5;
  snake_array = [];
  for(var i = length - 1;i>=0;i--)
    {
      snake_array.push({x:i,y:2});
    }
}
  
function paint()
{
  
  for(var i=0; i < snake_array.length; i++)
    {
      var tail = snake_array.pop();
 
			var c = snake_array[i];
			ctx.fillStyle = "blue";
			ctx.fillRect(c.x*10, c.y*10, 10, 10);
			ctx.strokeStyle = "white";
			ctx.strokeRect(c.x*10, c.y*10, 10, 10);
      
    }
}
paint();
  
});

cy正确创建（它适用于所有其他测试的情况）和canvasXpress元素一样。当我的指针悬停在canvasXpress元素上然后通过cy网络返回时，麻烦就开始了。当发生这种情况时，网络层似乎被破坏了。我可以点击节点，但它们会消失或卡在指针上（除非我点击右键）。此外，当我点击任何东西时，边缘指向随机点。我怀疑是canvasXpress元素与cy层的z-index混淆。你知道可能会发生什么吗？谢谢你的时间！

Answer 1

不要为多个lib容器共享相同的div。这一般不是一个好主意。

这样做

一些div
- viz A div
- viz B div

然后使用CSS将A和B div叠加在一起。

cytoscape.js和canvasXpress混合

1 个答案: