我对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);
}
逐行拆分并将标题行与内容行隔离是读者