D3：如何將CSV字符串解析為對象，其中鍵是列名，值是數據數組？

Question

我想使用D3 v3.5.6將CSV字符串轉換為Javascript對象，其中列名是鍵，而它們的數據在數組中。

到目前為止，我的JS：

var csvString= 'date,dow,sp500,nasdaq\n1/1/16,10,15,8\n1/3/16,5,3,7\n1/5/16,12,18,12\n';
var headers = []
d3.csv.parse(csvString, function(data){
  headers = d3.keys(data);
});

這用列名的字符串填充數組headers ，但是我不知道如何獲取數據。

我想做一個這樣的對象：

{
  "date": ["1/1/16","1/3/16","1/5/16"],
  "dow": ["10","5","12"],
  ...
}

僅D3可以做到嗎？

這是易於理解的CSV字符串：

date,dow,sp500,nasdaq
1/1/16,10,15,8
1/3/16,5,3,7
1/5/16,12,18,12

Answer 1

好吧，除了d3.csv.parse() ，在我看來，這個問題與D3無關，可以使用純JavaScript來解決：

 var csvString = 'date,dow,sp500,nasdaq\\n1/1/16,10,15,8\\n1/3/16,5,3,7\\n1/5/16,12,18,12\\n'; var data = d3.csv.parse(csvString); var headers = d3.keys(data[0]); var myObject = {}; headers.forEach(function(d) { myObject[d] = []; }); data.forEach(function(d) { for (var key in d) { myObject[key].push(d[key]); } }); console.log(myObject); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 

Answer 2

使用下划線（僅是我慣用的原因，您可以使用常規js map / forEach）

var csvArray = csvDataString.split(',');
var keys = _.first(csvArray);
var values = _.rest(csvArray);
var asArrayOfObjects = _.map(values, function(row) {
  var mapping = {};
  _.each(row, function(rowItem, i) { mapping[keys[i]] = rowItem }, {});  
  return mapping;
});

Answer 3

此例程解析這些字符串的數組（假設格式一致），並將它們作為以所需方式格式化的字符串數組返回。 如果要對象而不是字符串，請修改函數（我在注釋中）。 您應該能夠將其提供給D3。

   var d3Data = splitStockStrings ( [
                    'date,dow,sp500,nasdaq\n1/1/16,10,15,8\n1/3/16,5,3,7\n1/5/16,12,18,12\n',
                    'date,dow,sp500,nasdaq\n1/1/17,10,15,8\n1/3/17,5,3,7\n1/5/17,12,18,12\n'
                ] );
  console.log ( d3Data );

  function splitStockStrings ( stockStrings ) {
    var newStrings = [];

    stockStrings.forEach ( function ( d ) {             
      var final = [];
      d.split ( '\n' ).forEach ( function ( frag, i ) {
        if ( i > 0 && frag.split ( ',' ) [ 0 ] ) {
          final.push ( frag.split ( ',' ) [ 0 ] );
        }
      });

      var obj = { date : final };
      var json = JSON.stringify ( obj );
      newStrings.push ( json );
      // Or if you don't want strings,
      // comment out the above and uncomment the below...
      // newStrings.push ( obj );
    });

    return newStrings;
   }