不使用画布的可移动和“可缩放”区域

Question

我目前正在开发一个基于Web的应用程序以可视化数据。该应用程序包含json文件，其格式如下：

var theData = {
   "nodes":{
      "IBM":{
         "type":"Institution",
         "properties":{
            "founded_in":"1998",
            "director":"whoever"
         }
      },
      "Joseph":{
         "type":"Employee",
         "properties":{
            "Nationality":"bangladeshi"
         }
      },
      [...]
   },
   "edges":{
      "Joseph-IBM":{
         "labeled":"Works at"
      },
      [...]
   }
} 

注意：json并不完全。

此数据已加载到应用程序中，它将显示给您：

节点是可拖动的对象，位于整个屏幕的旁边，关系的线和标签也相应地移动。

我想做什么？

我想使图形“放置”的表面可移动和缩放，因此可以显着改善UX。我见过的方式是

• 使用画布。 我发现的问题是，画布是第一层，插入的元素既不能悬停也不能单击（例如，添加事件）。我确实知道这些并不是真正的问题，因为有一个使用（canvas）的图表，但是我不知道如何解决。

我不是要您给我确切的代码（如果您愿意，将不胜感激:)），而是帮助我找到实现可移动和可缩放表面的方法！

我希望一切顺利，并在此先感谢您提供的任何帮助。