首页
/ notebookJS 使用教程

notebookJS 使用教程

2024-09-26 15:44:02作者:裴锟轩Denise

1. 项目介绍

notebookJS 是一个用于在 Python Notebooks(如 Jupyter Notebook 和 Google Colab)中无缝集成 JavaScript 代码的 Python 库。它允许用户在 Python 环境中执行自定义的 JavaScript 代码,这对于实现和重用交互式数据可视化非常有用。notebookJS 能够自动下载和处理来自网络的 JavaScript 库和 CSS 样式表,并支持 Python 和 JavaScript 之间的双向通信。用户可以通过 JavaScript 触发 Python 回调函数,从而实现动态数据处理和前端更新。

2. 项目快速启动

安装

首先,您可以通过 pip 安装 notebookJS:

pip install notebookjs

或者,您可以克隆 GitHub 仓库并手动安装:

git clone https://github.com/jorgehpo/notebookJS.git
cd notebookJS
python setup.py install

基本使用

以下是一个简单的示例,展示如何在 Jupyter Notebook 中使用 notebookJS 执行 JavaScript 代码:

from notebookjs import execute_js

# 定义一个简单的 JavaScript 函数
helloworld_js = """
function helloworld(div_id, data) {
    document.querySelector(div_id).textContent = "Hello, World!";
}
"""

# 执行 JavaScript 函数
execute_js(helloworld_js, "helloworld")

3. 应用案例和最佳实践

案例1:使用 D3.js 绘制圆形

以下示例展示了如何使用 D3.js 在 Jupyter Notebook 中绘制一个彩色圆形:

from notebookjs import execute_js

# 定义 JavaScript 代码
d3_circle_js = """
function draw_circle(div_id, data) {
    d3.select(div_id)
      .append("div")
      .style("width", "50px")
      .style("height", "50px")
      .style("background-color", data.color)
      .style("border-radius", "50px");
}
"""

# 执行 JavaScript 函数
execute_js(d3_circle_js, "draw_circle", data_dict={"color": "red"})

案例2:双向通信

以下示例展示了如何在 JavaScript 和 Python 之间进行双向通信:

from notebookjs import execute_js

# 定义 Python 回调函数
def compute_power_2(data):
    n = data['n']
    n2 = n ** 2
    return {"power2": n2}

# 定义 JavaScript 代码
callback_js = """
function callback_example(div_id, data) {
    let comm = new CommAPI("compute_power_2", (ret) => {
        alert("The returned value is " + ret.power2);
    });
    comm.call({n: 3});
}
"""

# 执行 JavaScript 函数
execute_js(callback_js, "callback_example", callbacks={"compute_power_2": compute_power_2})

4. 典型生态项目

Jupyter Notebook

Jupyter Notebook 是一个开源的 Web 应用程序,允许用户创建和共享包含实时代码、方程、可视化和叙述性文本的文档。notebookJS 与 Jupyter Notebook 无缝集成,使得在 Jupyter 环境中执行 JavaScript 代码变得非常方便。

Google Colab

Google Colab 是一个基于云的 Jupyter Notebook 环境,允许用户在浏览器中编写和执行 Python 代码。notebookJS 同样支持 Google Colab,用户可以在 Colab 中使用 JavaScript 进行交互式数据可视化。

D3.js

D3.js 是一个用于数据可视化的 JavaScript 库。通过 notebookJS,用户可以在 Jupyter Notebook 或 Google Colab 中直接使用 D3.js 进行复杂的数据可视化,而无需离开 Python 环境。

通过以上教程,您应该能够快速上手使用 notebookJS,并在 Python Notebooks 中实现丰富的 JavaScript 功能。

热门项目推荐
相关项目推荐

项目优选

收起
Python-100-DaysPython-100-Days
Python - 100天从新手到大师
Python
576
107
Ffit-framework
面向全场景的 Java 企业级插件化编程框架,支持聚散部署和共享内存,以一切皆可替换为核心理念,旨在为用户提供一种灵活的服务开发范式。
Java
111
13
HarmonyOS-ExamplesHarmonyOS-Examples
本仓将收集和展示仓颉鸿蒙应用示例代码,欢迎大家投稿,在仓颉鸿蒙社区展现你的妙趣设计!
Cangjie
285
74
RuoYi-Cloud-Vue3RuoYi-Cloud-Vue3
🎉 基于Spring Boot、Spring Cloud & Alibaba、Vue3 & Vite、Element Plus的分布式前后端分离微服务架构权限管理系统
Vue
44
29
Cangjie-ExamplesCangjie-Examples
本仓将收集和展示高质量的仓颉示例代码,欢迎大家投稿,让全世界看到您的妙趣设计,也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
204
50
LangBotLangBot
😎丰富生态、🧩支持扩展、🦄多模态 - 大模型原生即时通信机器人平台 | 适配 QQ / 微信(企业微信、个人微信)/ 飞书 / 钉钉 / Discord / Telegram 等消息平台 | 支持 OpenAI GPT、ChatGPT、DeepSeek、Dify、Claude、Gemini、Ollama、LM Studio、SiliconFlow、Qwen、Moonshot、ChatGLM 等 LLM 的机器人 / Agent | LLM-based instant messaging bots platform, supports Discord, Telegram, WeChat, Lark, DingTalk, QQ, OpenAI ChatGPT, DeepSeek
Python
7
1
RGF_CJRGF_CJ
RGF是Windows系统下的通用渲染框架,其基于Direct3D、Direct2D、DXGI、DirectWrite、WIC、GDI、GDIplus等技术开发。RGF仓颉版(后续简称"RGF")基于RGF(C/C++版)封装优化而来。RGF为开发者提供轻量化、安全、高性能以及高度一致性的2D渲染能力,并且提供对接Direct3D的相关接口,以满足开发者对3D画面渲染的需求。
Cangjie
11
0
omega-aiomega-ai
Omega-AI:基于java打造的深度学习框架,帮助你快速搭建神经网络,实现模型推理与训练,引擎支持自动求导,多线程与GPU运算,GPU支持CUDA,CUDNN。
Java
11
2
openHiTLSopenHiTLS
旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件,通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求,让密码技术应用更简单,同时探索后量子等先进算法创新实践,构建密码前沿技术底座!
C
59
47
CangjieCommunityCangjieCommunity
为仓颉编程语言开发者打造活跃、开放、高质量的社区环境
Markdown
900
0