在同一HTML页面上使用d3v3和d3v4的mpld3

Question

我正在使Web应用程序现在在python flask本地服务器上运行。初始呈现索引页面后，我使用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计算后将其替换为我需要的图）作为json字符串脚本，我在dom中添加了该脚本。所有这一切都可以正常工作（使用d3在python matplotlib中的图被“翻译”并可视化在我的索引页上），除了mpld3脚本需要并使用d3 v3的事实，而我的项目是使用d3 v4生成的。

//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语言有关，然后是其他问题）是>>：

我如何继续使用“ d3”变量作为包含<3版本的version 4.xx版本的变量，使用mpld3和d3 version 3.xx

绘制图形前后，而不更改所有的“ d3 .x”调用“ d3v4.x”或其他名称？我希望上下文和问题足够清楚。

我正在使Web应用程序现在在python flask本地服务器上运行。初始呈现索引页面后，我使用d3.json进行了aync调用：//index.html