Javascript cytoscape.js和canvasXpress混合

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

<div class="col-sm-12">
   <div class="col-sm-6 result box" id="divHeatmap">
     <!-- This div is replaced by a canvasXpress element-->
     <div><canvas id="canvas1"></canvas></div>
   </div>
   <div class="col-sm-6 result row" style="padding-left:30px;" id="divNetwork">
     <div class="col-sm-12 row result box" style="padding-left:30px; ">
         <div class="result row">
             <div id="cy"></div>
         </div>
     </div>
   </div>
</div> 

---

与canvasXpress元素一样，cy被正确创建（它在每一个测试的情况下都有效）。当我的指针悬停在canvasXpress元素上，然后通过cy网络返回时，问题就开始了。当这种情况发生时，网络的各个层似乎都被破坏了。我可以单击节点，但它们要么消失，要么卡在指针上（除非我右键单击）。此外，当我点击任何东西时，边指向随机点。我怀疑canvasXpress元素会弄乱cy层的z索引。你知道会发生什么事吗？谢谢你抽出时间

对于多个lib容器，不要共享同一个div。总的来说，这不是个好主意

这样做

• 某个部门
  • 即分区
  • 维兹B分区

---

只需使用CSS将A和B div堆叠在一起即可。

谢谢您的回复！也许我误解了，但我不是已经这么做了吗div-divHeatmap-DivDivNetwork我一定忽略了你的例子。也许是你使用的列类？很难说。看到jsbin或jsfiddle会很有帮助。我尝试了很多东西，这就是我学到的。我把热图放在一个完全不相关的div中，仍然发生了混淆。canvasXpress中没有任何事件侦听器是罪魁祸首（我禁用了它们，但仍然得到相同的错误）。问题发生的确切时刻是当我将鼠标悬停在canvasXpress热图上后实际单击cytoscape图形时（例如，在单击图形之前，缩放等操作仍然有效）。其他非Xpress画布不会引发此问题。有关混淆的具体信息：1。点击空白（不按住它）“抓取”图形，并可以将其四处移动（通常它什么也不做），同时显示圆形阴影，表示您按住了该点击。您必须右键单击以保持图形不变。2.单击一个节点会使该节点消失，或者再次“抓住”整个图形。3.单击图形中的任意位置后，“缩放”将不再起作用。4.在几次单击之后，节点和边会随机出现和消失（在它们的初始位置，或者在我之前单击时“移动”它们的位置），如果不看到实时演示，就无法判断问题所在。如果在没有CanvasXpress的情况下一切正常，那么我强烈怀疑CanvasXpress就是问题所在。Cytoscape独立运行，不应与任何内容冲突。如果CanvasXpress在全球范围内做了一些奇怪的事情，您必须要求他们修复代码。