mpld3 с использованием d3v3 и d3v4 на одной странице html - PullRequest
Новая
       36

mpld3 с использованием d3v3 и d3v4 на одной странице html

0 голосов
/ 09 мая 2020

Я сейчас создаю веб-приложение, работающее на локальном сервере python flask. После первоначального рендеринга моей индексной страницы я делаю вызов ayn c, используя d3. json: 

//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. Все это работает отлично (сюжет из python matplotlib "переведен" и визуализирован на моей индексной странице с помощью d3), за исключением того факта, что сценарий 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" в качестве переменная, содержащая версия 4.xx версия d3 до и после рисования графика с использованием mpld3 и d3 версия 3.xx без изменения всех вызовов «d3.x» на «d3v4.x» "или другие имена? Надеюсь, контекст и вопрос достаточно ясны.

1 Ответ

0 голосов
/ 09 мая 2020

Я отвечаю себе, что если кто-то столкнется с такой проблемой, я решил эту проблему, вызвав d3, которые используют d3 версии 4 как d3v4, а d3 сохраняют как d3. Я бы не хотел этого делать, потому что мне пришлось изменить все свои вызовы, а также заменить ссылки cdn на локальные ресурсы, которые были изменены, заменив даже там (внутри библиотек) d3 на d3v4.

...