أياكس تحميل الرسم أثناء انتظار الرسوم البيانية d3 / استجابة .json؟ (القضبان)

2

أقوم بتحميل العديد من الرسوم البيانية الخطية d3 في تطبيق Ruby on Rails وأريد عرض صورة تحميل (gif) بينما أنتظر استجابة بياناتي لملئها.

ما هي أفضل وأسهل طريقة للقيام بذلك؟ هل يجب أن أضع بعض jQuery داخل مكالمة Ajax أو قبلها ، ربما؟

أبعث طلب ajax لبعض .json وأرسم الرسوم البيانية في ملف .js يبدو كالتالي:

my_d3_file.js: 

var loadData = function () {  
var path = window.location.pathname.split('/');
var site_id = path[path.length - 1];
$.ajax({
      type: 'GET',
      contentType: 'application/json; charset=utf-8',
      url: '/data_reports.json?site_id=' + site_id + '&graphable=true',
      dataType: 'json',
      success: function (data) {
          drawGraphs(data)
      },
      failure: function (result) {
          error();
      }
});

function drawGraphs(data) {
    var svg = d3.select("#plot1").append("svg")...
    // etc, code for d3 graphs
}

$(document).ready(function () {
    loadData();
})

يبدو html الخاص بي مثل هذا:

my_graphs.html.erb 

 <div id="plot1" class="plot"></div>

تبدو بنية ملف My Rails كما يلي: 

assets
    images
        my_loading_image.gif
    javascripts
        my_d3_file.js
    stylesheets
        my_css.css
views
    graph_folder
        my_graphs.html.erb

هل هناك شيء مثل هذا جعلني أبدأ؟ لست متأكدا من أين يجب وضع كل شيء ، وتحديدا في ملف JavaScript ، فيما يتعلق بمكالمة ajax.

من الداخل ("# plot1"): 

<img src="../../assets/images/ajax-loader.gif" id="loading-gif" 
style="display:none" />
//also, is my file path correct?

في بلدي المغلق: 

  #loading-indicator {
    position: relative;
    left: 10px;
     top: 10px;
   }

في my_d3_file.js: 

 $(document).ajaxSend(function(event, request, settings) {
    $('#loading-gif').show();
  });


 $(document).ajaxComplete(function(event, request, settings) {
    $('#loading-gif').hide();
 });

شكرا جزيلا! اسمحوا لي أن أعرف إذا كان يمكنني تقديم مزيد من المعلومات!

2 الاجابة

3
افضل جواب

فقط تضمين الرسم الدوار داخل #plot1 بطاقة شعار 

<div id="plot1" class="plot">
    <img src="../../assets/images/ajax-loader.gif"/>
</div>

في الوقت الذي تريد رسم الرسم البياني الخاص بك هنا فقط حدد الصورة وإزالتها ، وإنشاء svg بدلاً من ذلك 

d3.select("#plot1 img").remove();
var svg = d3.select("#plot1").append("svg")
    .attr("width", 500)
    .attr("height", 500);

فقط أضف الرسم إلى هذا svg متغير

:مؤلف
مشاركة الرابط
1
افضل جواب

ربما هذا يساعد ، في استدعاء أجاكس الخاص بك استخدم beforeSend رد الاتصال لعرض تحميل gif ، وفي success رد الاتصال إخفاءهم وتقديم الرسوم البيانية. شيء مثل: 

$.ajax({
  beforeSend. function() {
    aFunctionToShowLoadingGIF();
  },
  success: function (data) {
    aFunctionToHideTheLoadingGIF();
    drawGraphs(data);
  }
  failure: function (result) {
    error();
  }
});
:مؤلف
مشاركة الرابط

أسئلة ذات صلة

أسئلة شائعة:

علامات السؤال:
d3.js
فوق
قائمة طعام