Ajax 在等待 d3 graphs/.json 响应时加载图形？（导轨）答案

【问题标题】：Ajax Loading graphic while waiting for d3 graphs/.json response? (Rails)Ajax 在等待 d3 graphs/.json 响应时加载图形？（导轨）
【发布时间】：2021-08-13 15:18:12
【问题描述】：

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

非常感谢！如果我能提供更多信息，请告诉我！

【问题讨论】：

问题在于（假设您使用的是 rails 默认设置）每次发送 ajax 请求时，您都会执行 $(document).ajaxSend() 和 $(document).ajaxComplete() 函数。这可能是以后的问题。
啊，我明白了。是因为它会干扰其他 ajax 请求吗？
不是“干涉”。但是，如果在您的应用程序中您正在执行任何其他 AJAX 调用，那么由于这些 AJAX 调用，这两个函数将被执行。以后这可能会或不会成为问题
@LaurenAH 与您的问题无关，但您为什么要混合使用 jQuery 和 D3？你不需要那种组合！仅使用 D3。

标签： javascript html ruby-on-rails ajax d3.js

【解决方案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 变量中

【讨论】：

【解决方案2】：

也许这会有所帮助，在您的 ajax 调用中使用 beforeSend 回调来显示加载 gif，并在您的 success 回调中隐藏它们并呈现图形。比如：

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

【讨论】：

【解决方案3】：

只需使用加载器创建一个 div。不要一开始就隐藏它。

<div id='loader'><img src="images/loader.gif"/></div>

然后在 d3 加载数据后隐藏加载器。

    // load the d3 data
    d3.json("json/data.json", function(treeData) {
        $("#loader").hide();
//rest of code
}

如果您需要在其他地方重新加载数据，请再次显示加载器 div。

【讨论】：