在 d3.json 中使用 d3.csv 组合多个 csv 文件数据输入的最佳方法是什么？

Question

我还是 javascript 和 d3 的新手。我正在尝试找到将多个 csv 外部文件组合到 d3 中的最佳方法，然后对其进行处理。目前我正在为一个文件使用下面这样的脚本。

d3.csv("file1.csv",funciton(error,data) {

// do something 

} 

有没有办法可以连接 file1.csv + file2.csv + .. file9.csv 在一个文件中类似于此.. 在 d3 中？

d3.csv( concat("file1.csv","file2,csv",..file9.csv") ,function(error,data) {

// do something 

} 

Answer 1

这是一个仅使用 d3 的解决方案。你可以在in this Plunkr看到它。

Javascript 代码是：

function multiCsv(files, callback) {
  var results = [];
  var error = "";
  var filesLength = (files || []).length;
  var callbackInvoked = false;
  for (var i = 0; i < filesLength; i++) {
    (function(url) {
      d3.csv(url, function(data) {
        if (data === null) {
          error += "Error retrieving \"" + url + "\"\n";
        } else {
          results.push(data);
        }
        // all files retrieved or an error occurred
        if (!callbackInvoked && (error || results.length === filesLength)) {
          if (error) {
            callback(error, null); // might want to send partial results here
          } else {
            callback(null, d3.merge(results));
          }
          callbackInvoked = true;
        }
      });
    })(files[i]);
  }
}

你会这样使用它：

multiCsv(["file1.csv", "file2.csv", "file3.csv"], function (err, results) {
  if (err) {
    alert(err);
    return;
  }
  var ul = document.createElement('ul');
  for (var i = 0, len = results.length; i < len; i++) {
    var li = document.createElement('li');
    li.textContent = results[i].FirstName + ' ' + results[i].LastName + ', ' + results[i].Age;
    ul.appendChild(li);
  }
  document.body.appendChild(ul);
});

（这只是将<ul> 添加到包含合并数组内容的页面）。

我没有全面测试过这个功能，所以YMMV。但它适用于我在 Chrome 中的简单测试用例。

Answer 2

我建议在托管 javascript 的服务器上执行此操作，然后将单个文件提供给 d3。鉴于所有 csv 文件的格式相同，并且像您的示例一样按顺序命名，这是在 unix 命令行上加入它们的简单方法：

head -q -n 1 file1.csv > concat.csv #OVERWRITE with line 1 (headers) tail -q -n +2 file*.csv >> concat.csv #APPEND lines 2+ from all matching files

---

使用 jquery 编辑，蛮力客户端方式：

var remaining = 0;
var collection = [];

$(document).ready(concatCSVs)

function concatCSVs(){
  var uris = ['csv1.csv', 'csv2.csv'];
  remaining = uris.length;
  uris.forEach(function(uri){
    getCSV(uri, collector)
  })
}

function getCSV(uri, callback){
  $.ajax(uri, {
    success: callback
  })
}

function collector(data){
  if(remaining == 0){
    throw new Error('Got more results than expected')
  }
  remaining -= 1;
  collection.push(data);
  if(remaining == 0){ // Finished!
    d3init(collection);
  }
}

function d3init(collection){
  console.log('Proceeding to load d3 with');
  console.log(collection);
}

按行拆分并将标题行与内容行隔离作为练习留给读者