cytoscape js 的可缩放背景

Question

我们正在为一个项目制作图表。该图应显示城市的所有十字路口。以及它们之间的大多数方式。我们开始使用 cytoscape.js 来绘制图表。现在我们想要图形背后的背景。这个背景将是那个城市的地图，所以它必须是可滚动的并且在正确的位置。

我们的第一个想法是制作一个矩形节点并给它一个背景。然后我们添加了地图并输入了正确的坐标。现在地图是可滚动的并且总是在正确的位置。这给我们带来了两个问题。首先，无法再平移图形，因为当您尝试平移时，您将尝试 select 底层节点。我们使用 cytograh-panzoom 插件解决了这个问题。

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

题目：

1. 有没有更好的库可以画这样的图？
2. 如果不能，是否可以使用 cytoscape 在节点顶部绘制边？
3. cytoscape 有没有其他方法可以做到这一点？

亲切的问候

Answer 1

您可以侦听 viewport 事件并更新 CSS 中设置的背景图像的 background-position 和 background-size 属性，以便您的 div .

或者代替背景图像，您可以有一个单独的 div 图像，该图像使用 CSS 转换而不是 background-* 属性。