Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/arrays/13.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 将包含CSV数据的数组合并到一个对象数组中_Javascript_Arrays_Csv_D3.js - Fatal编程技术网

Javascript 将包含CSV数据的数组合并到一个对象数组中

Javascript 将包含CSV数据的数组合并到一个对象数组中,javascript,arrays,csv,d3.js,Javascript,Arrays,Csv,D3.js,我受此影响,将CSV文件存储在单独的数组中,效果很好。我希望再添加8个数组,每个数组保存CSV文件的内容 但是如何将这些数组合并到一个对象数组中呢拥有一个对象数组对于我以后应用这些数组至关重要。到目前为止,我所知道的如下,但我不确定它是否正确 任何帮助都将不胜感激 var dataCSV; var dataCSV2; var collection = {dataCSV, dataCSV2}; d3.csv("data/csv1.csv", function(data) { data.

我受此影响,将CSV文件存储在单独的数组中,效果很好。我希望再添加8个数组,每个数组保存CSV文件的内容

但是如何将这些数组合并到一个对象数组中呢拥有一个对象数组对于我以后应用这些数组至关重要。到目前为止,我所知道的如下,但我不确定它是否正确

任何帮助都将不胜感激

var dataCSV;
var dataCSV2;

var collection = {dataCSV, dataCSV2};

d3.csv("data/csv1.csv", function(data) {
    data.forEach(function(d) {
        d.word = d.word;
        d.frequency = +d.frequency;
})
    dataCSV = data;
    console.log(dataCSV);
});

d3.csv("data/csv2.csv", function(data) {
    data.forEach(function(d) {
        d.word = d.word;
        d.frequency = +d.frequency;
    })
    dataCSV2 = data;
    console.log(dataCSV2);
});

function merge(data1, data2) {
    collection = {data1, data2};
    console.log(collection);
}

merge(dataCSV, dataCSV2);
理想情况下,我希望集合的输出为:

collection {
    dataCSV {
        word: ..., frequency: ...,
        word: ..., frequency: ...
    },
    dataCSV2 {
        word: ..., frequency: ...,
        word: ..., frequency: ...
    }
 }

不要重复自己的操作,而是创建一个方法来获取数据、格式化数据并返回数据。然后使用收集多个承诺的结果。然后可以在一个对象中收集两个数组

示例(未测试):


您一定要使用旧版本的d3/d3队列吗?如果升级到v5,您的生活会更轻松。我不知道v5是否可用。。。我会调查的。V5中我需要的解决方案是什么样的?请查看我的to
d3 fetch
模块替换了v5中现已弃用的模块
d3 queue
。@altocumulus这令人困惑,我可能需要发布另一个问题。我链接到的答案中的解决方案与@Oridori的答案中提出的基本相同。然而,v5使您的生活更加轻松,因为d3使用了Fetch API,它将自己返回承诺,即,
d3.csv
返回承诺,因此不需要自己创建新的承诺。这就是你在我的回答中看到的。同样的技术,只是更短。嘿,伙计,我想说这很有效。但是,当使用
promises
时,是否可以在全局范围内使用
collection
?您可以将函数中的数据分配给全局变量(就像您在原始代码中所做的那样),但不确定它是否会在您需要时出现。在原始代码中,在
d3.csv()之后添加
console.log(dataCSV1)
。结果总是
未定义
。由于异步调用,在结果到达之前执行调用后的代码,并且知道何时完成的唯一方法是使用回调、承诺、生成器或异步/等待(使用承诺)。我给你的建议是学习javascript是如何工作的。
const getCsv = (url) => new Promise((resolve) => {
  d3.csv(url, function(data) {
    data.forEach(function(d) { // you can use a Array.map() instead for a cleaner solution
      d.word = d.word;
      d.frequency = +d.frequency;
    })

    resolve(data);
  });
});

Promise.all([ // load both csvs, and wait for the results of both
  getCsv('data/csv1.csv'),
  getCsv('data/csv1.csv')
])
.then(([dataCSV, dataCSV]) => { 
  const collection = { dataCSV, dataCSV2 };
  console.log(collection );
});