Ajax在等待d3图形/.json响应时加载图形？ （路轨）

Question

我正在Ruby on Rails应用程序中加载多个d3折线图，并希望在等待数据响应填充它们时显示加载图像（gif）。

什么是最好，最简单的方法？我应该在我的Ajax调用中还是之前放置一些jQuery？

我发送了一些.json的ajax请求，并在.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>

我的Rails文件结构如下：

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

这样的事情会让我开始吗？我只是不确定与ajax调用相关的所有内容，特别是在我的JavaScript文件中。

内部（“＃plot1”）：

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

在我的CSS中：

  #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();
 });

非常感谢！让我知道是否可以提供更多信息！

Answer 1

只需将旋转器图形包含在#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变量

Answer 2

这可能会有所帮助，在您的ajax调用中，使用beforeSend回调显示加载的gif，在success回调中隐藏它们并呈现图形。像这样：

$.ajax({
  beforeSend. function() {
    aFunctionToShowLoadingGIF();
  },
  success: function (data) {
    aFunctionToHideTheLoadingGIF();
    drawGraphs(data);
  }
  failure: function (result) {
    error();
  }
});