D3.js 连接来自多个 csv 文件的数据答案

【问题标题】：D3.js join data from multiple csv filesD3.js 连接来自多个 csv 文件的数据
【发布时间】：2016-10-27 13:03:15
【问题描述】：

我是 D3 的新手，我的任务是创建一个仪表板来显示油井数据。数据位于 3 个 csv 文件中，具有以下标题。

公司数据： CompanyName,FacilityName,WellName,WellId,WellGasNRI,WellOilNRI,WellShrinkageFactor,WellYieldFactor
井预算估算： WellId,Month,Year,DaysInMonth,GrossOil,GrossGas,GrossBOE,NetBOE
实际井产量： WellId,Date,GrossOil,GrossGas,NetOil,NetGas,GasWithShrinkage,GasWithYield

我曾与d3.nest() 合作，对每个文件中的记录进行分组，但希望将分组的数组合并到一个结构中。

其中一个主要显示是将预算估算与每口井的实际产量进行比较，然后按设施进行比较。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript csv d3.js

【解决方案1】：

一种方法是嵌套多个d3.csv 调用，如下所述：Importing data from multiple csv files in D3：

d3.csv("file1.csv", function(data1) {
  d3.csv("file2.csv", function(data2) {
     d3.csv("file3.csv", function(data3) {
        // do something with the data
        console.log("CSV1", data1);
        console.log("CSV2", data2);
        console.log("CSV3", data3);
     });
  });
});

另一个选项（我更喜欢）是使用d3.queue（这是一个插件 - 您需要单独导入queue.js）：

queue()
    .defer(d3.csv, 'file1.csv')
    .defer(d3.csv, 'file2.csv')
    .defer(d3.csv, 'file3.csv')
    .await(processData);

function processData(data1, data2, data3) {
    // do something with the data
    console.log("CSV1", data1);
    console.log("CSV2", data2);
    console.log("CSV3", data3);
}

从那里您可以使用 d3 和 JavaScript 数组操作函数来组合、合并、拆分以及对数据对象做任何您想做的事情。例如，您可能希望使用 d3.nest().key() 来组织 CSV，以便可以使用 WellId 字段选择它们，然后使用嵌套的 for 循环或其他机制将它们组合起来。以下是一些关于 D3 中数据操作的优秀教程和参考资料：

【讨论】：