时间戳

首页 > 解决方案 > mpld3 在同一个 html 页面上使用 d3v3 和 d3v4

javascript - mpld3 在同一个 html 页面上使用 d3v3 和 d3v4

问题描述

我正在制作一个现在在 python 烧瓶本地服务器上运行的 Web 应用程序。在初始呈现我的索引页面后，我使用 d3.json 进行 aync 调用：

//index.html
<script> 
//...
d3.json( url )
.post(data, function(error, root) {
    if(error!=null){
        console.log("Error: ",error)
    }
    else if (root!=null){
        console.log("Data: ",root)
        script_str = root[3] 
        console.log(script_str)
        $('head').append(script_str);

    }
});
//...
</script>

因此，在 python 服务器中，该帖子详细说明如下：

#application.py
#...
fig=plt.figure()
plt.plot([3,1,4,1,5], 'ks-', mec='w', mew=5, ms=20)
plt.title("Test plot")
plt.close() # and this one
# mpld3.show()
figInHtml=mpld3.fig_to_html(fig)#,d3_url="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js")
print("--------------------",figInHtml)
return jsonify(data.CountryName,data.Year1,data.Year2,figInHtml)

这将返回一个虚拟图（稍后我将在 python 中进行一些计算后将其替换为我需要的图）作为我添加到 dom 中的 json 字符串脚本。除了 mpld3 脚本需要并使用 d3 v3 而我的项目是使用 d3 v4 构建的这一事实之外，所有这些都完美地工作（来自 python matplotlib 的图被“翻译”并在我的索引页面上可视化）：

//Content of script_str returned by mpld3.fig_to_html(fig)
<style>

</style>

<div id="fig_el203381403861699907281555672219"></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_el203381403861699907281555672219", {"width": 640.0, "height": 480.0, "axes": [], "data": {}, "id": "el20338140386169990728", "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: "https://mpld3.github.io/js/d3.v3.min"}});
   require(["d3"], function(d3){
      window.d3 = d3;
      mpld3_load_lib("https://mpld3.github.io/js/mpld3.v0.3.js", function(){

         mpld3.draw_figure("fig_el203381403861699907281555672219", {"width": 640.0, "height": 480.0, "axes": [], "data": {}, "id": "el20338140386169990728", "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("https://mpld3.github.io/js/d3.v3.min.js", function(){
         mpld3_load_lib("https://mpld3.github.io/js/mpld3.v0.3.js", function(){

                 mpld3.draw_figure("fig_el203381403861699907281555672219", {"width": 640.0, "height": 480.0, "axes": [], "data": {}, "id": "el20338140386169990728", "plugins": [{"type": "reset"}, {"type": "zoom", "button": true, "enabled": false}, {"type": "boxzoom", "button": true, "enabled": false}]});
            })
         });
}
</script>

最后，在这个漫长但必要的前提之后，问题（与 javascript 语言相关的更多）是：

在使用 mpld3 和 d3版本 3.xx绘制绘图之前和之后，如何在不将所有“d3.x”调用更改为“d3v4.x”的情况下继续使用“d3”变量作为包含d3版本 4.xx版本的变量或其他名称？我希望上下文和问题足够清楚。

标签： javascriptpythonmatplotlibd3.jsmpld3

解决方案

如果有人会遇到这样的问题，我会回答自己，我解决了这个调用 d3，将 d3 版本 4 用作 d3v4，并将 d3 保持为 d3。我本来不想这样做，因为我不得不改变我的所有调用，还用修改过的本地资源替换 cdn 链接，甚至用 d3v4 替换那里（在库中）d3。

推荐阅读