如何使用 Queue.js 和 D3.js 加载多个文件？

Question

情况

我正在尝试加载多个 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
});

问题

我如何结合以上两个sn-ps，这样我就不必编写xml硬编码的位置并将所有参数传递给analyze函数？任何朝着正确方向的推动都将不胜感激。

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

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

在 Java 中我会选择使用 var...args 来执行此操作，但我不知道如何在 JS 中执行此操作。

Answer 1

这个问题实际上分为两部分：

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 中处理可变数量的参数？

这实际上是very well supported in 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];
    ...
  }
}