如何使用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
});

问题

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

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

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

2. 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];
    ...
  }
}