Question

我正在尝试按照this示例和this教程制作一个D3小部件，在调用函数时向小部件显示D3 HTML代码。我能够使它成为函数within the notebook cells itself using %%javascript，但这对于最终用户来说会很麻烦。

如何将Python D3Widget类定义和Javascript D3View呈现代码移动到外部文件，以便用户可以简单地导入文件并调用该函数？

我希望最终结果看起来像this，用户只需导入一个函数并调用它即可。

Answer 1

整理您的代码

在笔记本根文件夹中为新窗口小部件创建一个包。例如，您可以使用以下目录结构：

helloworld/

    __init__.py
    helloworld_widget.py

    helloworldjs/
        helloworld.view.js

        css/
            helloworld.css

对服务器端进行编程

在helloworld / helloworld_widget.py中，放入你的Python类：

from ipywidgets import widgets
from traitlets import Unicode

class HelloWorldWidget(widgets.DOMWidget):
    _view_module = Unicode("nbextensions/helloworld/helloworld_view", sync=True)
    _view_name = Unicode('HelloWorldView', sync=True)

这就是你的python代码。

创建Javascript视图

在helloworld / helloworldjs / helloworld.view.js计划您的客户端：

define(["nbextensions/widgets/widgets/js/widget"], function(widget) {

    var HelloWorldView = widget.DOMWidgetView.extend({

        render: function(){
            this.$el.text("Hello world");
        },
    });

    return {HelloWorldView: HelloWorldView}
});

简单，不是吗？最后但并非最不重要......

将客户端部署到笔记本的扩展文件夹

为此，您可以在 init .py中编写一个函数，并在每次修改Javascript视图中的内容时在笔记本中执行该函数。

我使用的这个非常类似于以下内容：

def notebook_install(overwrite=True, user=True):
    import os
    from notebook import install_nbextension
    from notebook.services.config import ConfigManager
    from IPython.display import display, Javascript

    js_path = os.path.join( os.path.dirname(__file__), 'helloworldjs')
    install_nbextension(js_path, overwrite=overwrite,
                        symlink=False, verbose=0, user=user)

现在您应该可以在笔记本中执行以下操作：

from helloworld.helloworld_widget import HelloWorldWidget
hello = HellowWorldWidget()
hello

享受！

仔细阅读本文也应该有所帮助：https://carreau.gitbooks.io/jupyter-book/content/notebook-extensions.html

导入iPython自定义窗口小部件功能（文件结构？）

1 个答案: