D3: Wie analysiere ich eine CSV-Zeichenfolge in ein Objekt, in dem Schlüssel Spaltennamen sind und Werte Arrays von Daten sind?

Question

Ich möchte D3 v3.5.6 verwenden, um eine CSV-Zeichenfolge in ein Javascript-Objekt zu konvertieren, wobei Spaltennamen Schlüssel sind und ihre Daten in Arrays sind.

Mein JS so weit:

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); 
}); 

Dies füllt Array headers mit Streichern von Spaltennamen, aber ich kann nicht herausfinden, wie die Daten zu erhalten.

würde Ich mag ein Objekt wie folgt machen:

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

Ist dies möglich, mit nur D3?

Hier ist der String CSV in leicht zu lesende Form:

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

Answer 1

Nun, abgesehen von d3.csv.parse(), so scheint es mir, dass dieses Problem nur wenig mit D3 zu tun hat, und kann mit reinem JavaScript gelöst werden:

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

Unterstrich (nur dazu führen, dass ist, was Im verwendet werden, um Sie regelmäßig js Karte/forEach verwenden könnte)

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

Diese Routine analysiert ein Array dieser Zeichenfolgen (unter der Annahme, dass das Format konsistent ist) und gibt sie als ein Array von Zeichenfolgen zurück, die so formatiert sind, wie Sie möchten. Wenn Sie das Objekt und nicht die Strings wollen, ändern Sie die Funktion (ich habe einen Kommentar). Sie sollten in der Lage sein, dies nur D3 zuzuführen.

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; 
    }