在 Jupyter Notebook 中使用 svg-pan-zoom答案

【问题标题】：Use svg-pan-zoom in Jupyter Notebook在 Jupyter Notebook 中使用 svg-pan-zoom
【发布时间】：2017-05-05 06:04:14
【问题描述】：

我想在 jupyter 单元格中嵌入一个外部 .svg，然后能够平移和缩放。具体来说，我想使用很棒的 svg-pan-zoom 库。考虑到类似的扩展，例如传单和地图框，这似乎是可能的。

尝试 svg-pan-zoom 中的示例，得到以下结果：

%%HTML
<html>
<body>
<h1>Demo for svg-pan-zoom: SVG in HTML 'object' element</h1>
<object id="demo-tiger" type="image/svg+xml" data="https://cdn.rawgit.com/ariutta/svg-pan-zoom/master/demo/tiger.svg" style="width: 500px; height: 500px; border:1px solid black; ">Your browser does not support SVG</object>
<script>
require.config({
  paths: {
      panzoom: '//cdn.rawgit.com/ariutta/svg-pan-zoom/master/dist/svg-pan-zoom'
  }
});
require(['panzoom'], function(panzoom) {
    console.log("Loaded :)"); 
    
    var s = document.getElementById('demo-tiger')
    s.onload = function(panzoom){
        console.log('loaded')
        
        panzoom.svgPanZoom('#demo-tiger', {
          zoomEnabled: true,
          controlIconsEnabled: true
        });
        }
    
    });
</script>
</body>
</html>

单元格渲染图像，但绝不渲染全景缩放功能。经过许多不同的方法，它仍然无法将svgPanZoom 识别为函数。

我也尝试将其加载到/nbextensions 目录中。这也不起作用。

我对 JS 或 DOM 没有经验，因此欢迎提出任何建议。

【问题讨论】：

我怀疑问题可能是您在对象标签上运行 panzoom。我“认为”您需要在 svg 元素上使用它，这意味着通过 contentDocument 访问它，例如 s.contentDocument.getElementById('the svg id') 将引用“对象”中的文档。可能有助于将其隔离在 jsfiddle 或其他东西上。
问题似乎是 svg-pan-zoom 没有加载到 Jupyter 单元格中——尽管它只是一个 html 页面。我可能不得不找一些 Jupyter 专家来看看。谢谢。
@jbeach 你最终找到那个了吗？

标签： svg ipython jupyter

【解决方案1】：

window.onload 在 Jupyter 中无法正常工作，原因很明显。请参阅https://github.com/vlasenkoalexey/tfgraphviz/blob/master/tfgraphviz/jupyter_helper.py 了解工作辅助方法。

【讨论】：

【解决方案2】：

在此线程中有一个在笔记本中使用平移缩放的工作示例：

https://community.deepnote.com/c/forum/svg-pan-zoom?expand_comment_id=623583&login_token=eZ3YucZ66GXYMtfxagm6B53rdAX5JHAkYsoK#comment_623583

%%html
  <body>
<script src="https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js"></script>
<div id="container" style="width: 500px; height: 300px; border:1px solid black; ">
<svg id="demo-tiger" xmlns="http://www.w3.org/2000/svg" style="display: inline; width: inherit; min-width: inherit; max-width: inherit; height: inherit; min-height: inherit; max-height: inherit; " viewBox="0 0 900 900">
  <circle cx="50" cy="50" r="50" />
</svg>
</div>
 <button id="enable">enable</button>
    <button id="disable">disable</button>

    <script>
      // Don't use window.onLoad like this in production, because it can only listen to one function.
      window.onload = function() {
        // Expose to window namespase for testing purposes
        window.zoomTiger = svgPanZoom('#demo-tiger', {
          zoomEnabled: true,
          controlIconsEnabled: true,
          fit: true,
          center: true,
          // viewportSelector: document.getElementById('demo-tiger').querySelector('#g4') // this option will make library to misbehave. Viewport should have no transform attribute
        });

        document.getElementById('enable').addEventListener('click', function() {
          window.zoomTiger.enableControlIcons();
        })
        document.getElementById('disable').addEventListener('click', function() {
          window.zoomTiger.disableControlIcons();
        })
      };
    </script>
  </body>

【讨论】：