使用 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回購和解壓的內容，以對JS D3和mpld3的本地副本在這里。 所以我使用以下方法嘗試導出一個 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",
                    )

根據此處和此處的文檔。 但是這樣做時，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>

所以我的問題歸結為兩個問題：

• 第一個片段如何導出一個在沒有互聯網連接的情況下呈現的 html 頁面？
• 為什么使用 d3_url 和 mpld3_url 會破壞 html 渲染？

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

Answer 1

所以我想出了我的主要問題，關於 d3_url 和 mpld3_url 的使用：使用此鏈接，並將上面的 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://”和路徑中的正斜杠。