如何使用队列.js和 D3.js 加载多个文件

How to load multiple files with Queue.js and D3.js?

本文关键字：js 文件 加载 何使用 队列 D3      更新时间：2023-09-26

>情况

我正在尝试加载多个xml文件（位于服务器上），而无需声明硬编码文件的名称。为此，我正在尝试使用 d3.queue 库 https://github.com/d3/d3-queue。

我已经实现了 xml 来强制布局以满足我自己的需要 （https://bl.ocks.org/mbostock/1080941），但有一个关键缺陷，即我需要手动输入我要加载的 xml 文件的名称......

繁殖

给定（从 http://learnjsdata.com/read_data.html 调整示例）：

queue()
  .defer(d3.xml, "/mappings/Customer.hbm.xml")
  .defer(d3.xml, "/mappings/Actor.hbm.xml")
  .await(analyze);
function analyze(error, Customer, Actor) {
  if(error) { console.log(error); }
  // do stuff with Customer data, do stuff with Actor data
}

鉴于我对 xml 处理的实现：

d3.xml("mappings/Customer.hbm.xml","application/xml", function(error,xml){
    if (error) throw error;
    // do stuff with the data retrieved from Customer.hbm.xml
});

问题

如何以这样一种方式组合上述两个片段，以便我不必编写 xml 硬编码的位置并将所有参数传递给分析函数？任何朝着正确方向的推动将不胜感激。

在伪代码中，我尝试编写如下代码（但我无法让它工作）：

  1. 函数从映射文件夹中获取 xml 的所有名称（可能使用 node.js fs.readdir 或 fs.readdirSync 方法，但我不确定这将如何工作）
  2. 对于每个 xml .defer（d3.xml， nameofxml）
  3. 将所有找到的名称作为参数传递给分析函数

在 Java 中，我会选择使用 var...参数，但我不知道如何在 JS 中做到这一点。

这个问题

实际上有两个部分：

  1. 如何将服务器端文件列表获取到客户端 JavaScript？

简短的回答是，如果没有可以返回该列表的服务器端 API，您就不会这样做。 根据您使用的后端，编写一个返回目标目录中文件的 JSON 数组的方法。 您首先调用它，获取响应，然后使用队列处理它们：

d3.json('/get/list/of/xml/files', function(error, fileArray){
  var q = d3.queue();
  fileArray.forEach(function(d){
    q = q.defer(d3.xml, d);
  });
  q.await(analyze);
});
  1. 如何在 JavaScript 中处理可变数量的参数？

这实际上在 JavaScript 中得到了很好的支持。

function analyze(error) {
  if(error) { console.log(error); }
  // skip 0 it's error variable
  for (i = 1; i < arguments.length; i++) {
    var xml = arguments[i];
    ...
  }
}
相关文章：