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

如何在 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];
    ...
  }
}