使用 mpld3 导出 matplotlib 图形的独立离线 html 图

Question

我正在尝试使用 mpld3 将 matplotlib 图形导出到独立的 html 文件。 这有效：

import numpy as np
import matplotlib.pyplot as plt
import mpld3

fig, ax = plt.subplots(1, 1)
ax = ax.plot(np.arange(10))

with open("graph.html", "w") as fileobj:
    mpld3.save_html(plt.gcf(), fileobj)

确实会发生导出，并且当我在具有 Internet 连接的浏览器中打开 html 文件时，图表会按预期显示。有趣的是，它在没有互联网连接的情况下也能按预期显示。这怎么可能，因为我希望 html 会尝试从在线 cdn 获取 js 组件（d3 和 mpld3）？

其次，我下载了mpld3 repo并解压了内容，以获得js d3和mpld3 here的本地副本。因此，我使用以下方法尝试导出 html 文件以供离线使用，使用：

import numpy as np
import matplotlib.pyplot as plt
import mpld3

fig, ax = plt.subplots(1, 1)
ax = ax.plot(np.arange(10))

with open("graph.html", "w") as fileobj:
    mpld3.save_html(plt.gcf(), fileobj,
                    d3_url=r"path\to\mpld3-master\mpld3\js\d3.v5.min.js",
                    mpld3_url=r"path\to\mpld3-master\mpld3\js\mpld3.v0.5.1.min.js",
                    )

根据文档 here 和 here。但是这样做时，html 在浏览器中显示为空白。这里是源代码：

<style>

</style>

<div id="fig_el158242311667823952363636180"></div>
<script>
function mpld3_load_lib(url, callback){
  var s = document.createElement('script');
  s.src = url;
  s.async = true;
  s.onreadystatechange = s.onload = callback;
  s.onerror = function(){console.warn("failed to load library " + url);};
  document.getElementsByTagName("head")[0].appendChild(s);
}

if(typeof(mpld3) !== "undefined" && mpld3._mpld3IsLoaded){
   // already loaded: just create the figure
   !function(mpld3){
       
       mpld3.draw_figure("fig_el158242311667823952363636180", {"width": 1280.0, "height": 960.0, "axes": [{"bbox": [0.125, 0.10999999999999999, 0.775, 0.77], "xlim": [-0.45, 9.45], "ylim": [-0.45, 9.45], "xdomain": [-0.45, 9.45], "ydomain": [-0.45, 9.45], "xscale": "linear", "yscale": "linear", "axes": [{"position": "bottom", "nticks": 7, "tickvalues": null, "tickformat_formatter": "", "tickformat": null, "scale": "linear", "fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}, {"position": "left", "nticks": 7, "tickvalues": null, "tickformat_formatter": "", "tickformat": null, "scale": "linear", "fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}], "axesbg": "#FFFFFF", "axesbgalpha": null, "zoomable": true, "id": "el158242311667809200", "lines": [{"data": "data01", "xindex": 0, "yindex": 1, "coordinates": "data", "id": "el158242311667979264", "color": "#1F77B4", "linewidth": 1.5, "dasharray": "none", "alpha": 1, "zorder": 2, "drawstyle": "default"}], "paths": [], "markers": [], "texts": [], "collections": [], "images": [], "sharex": [], "sharey": []}], "data": {"data01": [[0.0, 0.0], [1.0, 1.0], [2.0, 2.0], [3.0, 3.0], [4.0, 4.0], [5.0, 5.0], [6.0, 6.0], [7.0, 7.0], [8.0, 8.0], [9.0, 9.0]]}, "id": "el158242311667823952", "plugins": [{"type": "reset"}, {"type": "zoom", "button": true, "enabled": false}, {"type": "boxzoom", "button": true, "enabled": false}]});
   }(mpld3);
}else if(typeof define === "function" && define.amd){
   // require.js is available: use it to load d3/mpld3
   require.config({paths: {d3: "path\to\mpld3-master\mpld3\js\d3.v5.min"}});
   require(["d3"], function(d3){
      window.d3 = d3;
      mpld3_load_lib("path\to\mpld3-master\mpld3\js\mpld3.v0.5.1.min.js", function(){
         
         mpld3.draw_figure("fig_el158242311667823952363636180", {"width": 1280.0, "height": 960.0, "axes": [{"bbox": [0.125, 0.10999999999999999, 0.775, 0.77], "xlim": [-0.45, 9.45], "ylim": [-0.45, 9.45], "xdomain": [-0.45, 9.45], "ydomain": [-0.45, 9.45], "xscale": "linear", "yscale": "linear", "axes": [{"position": "bottom", "nticks": 7, "tickvalues": null, "tickformat_formatter": "", "tickformat": null, "scale": "linear", "fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}, {"position": "left", "nticks": 7, "tickvalues": null, "tickformat_formatter": "", "tickformat": null, "scale": "linear", "fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}], "axesbg": "#FFFFFF", "axesbgalpha": null, "zoomable": true, "id": "el158242311667809200", "lines": [{"data": "data01", "xindex": 0, "yindex": 1, "coordinates": "data", "id": "el158242311667979264", "color": "#1F77B4", "linewidth": 1.5, "dasharray": "none", "alpha": 1, "zorder": 2, "drawstyle": "default"}], "paths": [], "markers": [], "texts": [], "collections": [], "images": [], "sharex": [], "sharey": []}], "data": {"data01": [[0.0, 0.0], [1.0, 1.0], [2.0, 2.0], [3.0, 3.0], [4.0, 4.0], [5.0, 5.0], [6.0, 6.0], [7.0, 7.0], [8.0, 8.0], [9.0, 9.0]]}, "id": "el158242311667823952", "plugins": [{"type": "reset"}, {"type": "zoom", "button": true, "enabled": false}, {"type": "boxzoom", "button": true, "enabled": false}]});
      });
    });
}else{
    // require.js not available: dynamically load d3 & mpld3
    mpld3_load_lib("path\to\mpld3-master\mpld3\js\d3.v5.min.js", function(){
         mpld3_load_lib("path\to\mpld3-master\mpld3\js\mpld3.v0.5.1.min.js", function(){
                 
                 mpld3.draw_figure("fig_el158242311667823952363636180", {"width": 1280.0, "height": 960.0, "axes": [{"bbox": [0.125, 0.10999999999999999, 0.775, 0.77], "xlim": [-0.45, 9.45], "ylim": [-0.45, 9.45], "xdomain": [-0.45, 9.45], "ydomain": [-0.45, 9.45], "xscale": "linear", "yscale": "linear", "axes": [{"position": "bottom", "nticks": 7, "tickvalues": null, "tickformat_formatter": "", "tickformat": null, "scale": "linear", "fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}, {"position": "left", "nticks": 7, "tickvalues": null, "tickformat_formatter": "", "tickformat": null, "scale": "linear", "fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}], "axesbg": "#FFFFFF", "axesbgalpha": null, "zoomable": true, "id": "el158242311667809200", "lines": [{"data": "data01", "xindex": 0, "yindex": 1, "coordinates": "data", "id": "el158242311667979264", "color": "#1F77B4", "linewidth": 1.5, "dasharray": "none", "alpha": 1, "zorder": 2, "drawstyle": "default"}], "paths": [], "markers": [], "texts": [], "collections": [], "images": [], "sharex": [], "sharey": []}], "data": {"data01": [[0.0, 0.0], [1.0, 1.0], [2.0, 2.0], [3.0, 3.0], [4.0, 4.0], [5.0, 5.0], [6.0, 6.0], [7.0, 7.0], [8.0, 8.0], [9.0, 9.0]]}, "id": "el158242311667823952", "plugins": [{"type": "reset"}, {"type": "zoom", "button": true, "enabled": false}, {"type": "boxzoom", "button": true, "enabled": false}]});
            })
         });
}
</script>

所以我的问题归结为 2 个问题：

• 第一个sn-p怎么会导出一个没有网络连接就渲染的html页面？
• 为什么使用 d3_url 和 mpld3_url 会破坏 html 渲染？

蟒蛇：3.8 matplotlib：3.2.1 mpldd3 版本：0.5.1

Answer 1

所以我发现了我的主要问题，关于 d3_url 和 mpld3_url 的使用：使用this link，并将上面的 html 源代码与在 mac 上生成的源代码进行比较，现在可以正常工作了：

# note the "file:// prefix and the forward slashes
with open("graph.html", "w") as fileobj:
    mpld3.save_html(plt.gcf(), fileobj,
                    d3_url="file://C:/.../mpld3-master/mpld3/js/d3.v5.min.js",
                    mpld3_url="file://C:/.../mpld3-master/mpld3/js/mpld3.v0.5.1.min.js",
                    )

问题在于 url 必须是存储 javascript 路径的简单字符串，而不是 python 路径。因此前缀“file://”和路径中的正斜杠。