cytoscape js的Zoomable背景

Question

我们正在为项目制作图表。此图表应显示城市的所有交叉路口。而他们之间的大多数方式。我们开始使用cytoscape.js绘制图形。现在我们想要图背后的背景。此背景将是该城市的地图，因此它必须可滚​​动并位于正确的位置。

我们的第一个想法是制作一个矩形节点并给它一个背景。比我们添加地图并放入正确的coördinates。现在地图是可滚动的，并且始终位于正确的位置。这给了我们两个问题。首先，图表不能再平移，因为当您尝试平移时，您将尝试选择基础节点。我们使用cytograh-panzoom插件修复了这个问题。

第二个问题是，边缘不再可点击，因为背景节点现在正在覆盖它们，并且似乎无法将边缘放在顶部。

问题：

1. 是否有更好的图书馆来绘制这样的图表？
2. 如果没有，是否可以使用cytoscape在节点顶部绘制边缘？
3. 使用cytoscape还有另一种方法吗？

亲切的问候

Answer 1

您可以收听viewport个事件，并更新CSS中为您的cy div设置的背景图片的background-position和background-size属性。

或者代替背景图片，您可以使用单独的div，其中的图像使用CSS变换而不是background-*属性。