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

What is the best way to combine multiple csv files data input using d3.csv in d3.json ?

本文关键字：csv d3 输入 数据 最佳 是什么 方法 文件 json 组合      更新时间：2023-09-26

我对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 
}

这里有一个仅使用d3的解决方案。你可以在这款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中的简单测试用例。

我建议在托管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);
}

逐行拆分并将标题行与内容行隔离是读者

的一项练习
相关文章：