如何将Jupyter Notebook（Python）转HTML后保留3D绘图交互性？

我之前踩过这个坑，试了几个方案都能完美解决Jupyter转HTML后3D图失去交互性的问题，给你详细拆解下：

方案一：用ipympl保留matplotlib的交互性 #

这是最贴近你原有工作流的方案，不用换绘图库，只要调整后端和导出方式：

• 第一步：先安装matplotlib的交互式后端ipympl

  pip install ipympl
  

• 第二步：在Notebook的最开头添加魔法命令，指定使用widget后端（一定要放在所有matplotlib导入之前！）

  %matplotlib widget
  

• 第三步：正常写你的3D绘图代码，比如：

  import matplotlib.pyplot as plt
  from mpl_toolkits.mplot3d import Axes3D
  import numpy as np
  
  fig = plt.figure()
  ax = fig.add_subplot(projection='3d')
  
  # 生成示例数据
  x = np.linspace(-5, 5, 100)
  y = np.linspace(-5, 5, 100)
  x, y = np.meshgrid(x, y)
  z = np.sin(np.sqrt(x**2 + y**2))
  
  ax.plot_surface(x, y, z, cmap='viridis')
  plt.show()
  

• 第四步：不要用Notebook内置的Download as HTML，改用命令行的nbconvert导出，它会自动打包交互组件：

  jupyter nbconvert --to html --execute your_notebook.ipynb
  

  这里的--execute参数会确保代码重新运行一遍，把最新的交互式绘图状态嵌入HTML里。

方案二：改用Plotly生成原生交互式3D图 #

Plotly的绘图本身就是基于JavaScript的，导出HTML后不需要额外依赖，兼容性拉满：

• 第一步：安装Plotly库

  pip install plotly
  

• 第二步：替换原有matplotlib代码为Plotly的3D绘图逻辑，示例：

  import plotly.graph_objects as go
  import numpy as np
  
  x = np.linspace(-5, 5, 100)
  y = np.linspace(-5, 5, 100)
  x, y = np.meshgrid(x, y)
  z = np.sin(np.sqrt(x**2 + y**2))
  
  fig = go.Figure(data=[go.Surface(z=z, x=x, y=y)])
  fig.update_layout(title='可旋转的3D曲面', autosize=False, width=800, height=600)
  fig.show()
  

• 第三步：直接用Notebook的File->Download as->HTML或者命令行nbconvert导出就行，生成的HTML里的3D图可以直接旋转、缩放，完全保留交互性。

方案三：用k3d做更复杂的3D交互（适合专业场景） #

如果你的3D可视化需求比较复杂，k3d是专门做Web交互式3D的库，性能和交互体验都很好：

• 第一步：安装k3d

  pip install k3d
  

• 第二步：示例代码

  import k3d
  import numpy as np
  
  x = np.linspace(-5, 5, 100)
  y = np.linspace(-5, 5, 100)
  x, y = np.meshgrid(x, y)
  z = np.sin(np.sqrt(x**2 + y**2))
  
  plot = k3d.plot()
  plot += k3d.surface(z.astype(np.float32), x=x.astype(np.float32), y=y.astype(np.float32), color=0xff0000)
  plot.display()
  

• 第三步：同样用nbconvert命令导出HTML，交互功能会完整保留。

几个关键注意事项 #

• 方案一中的%matplotlib widget必须放在所有matplotlib导入语句之前，否则后端切换不生效，还是会生成静态图。
• 用nbconvert导出时，建议先关闭对应的Notebook窗口，避免进程冲突导致导出失败。
• Plotly方案的兼容性最好，几乎所有现代浏览器都能直接打开HTML并使用交互功能，不需要用户安装任何插件。

内容的提问来源于stack exchange，提问作者wayag