Wählen Sie Daten aus einer CSV vor dem Laden mit Javascript (d3-Bibliothek)

Question

Ich möchte einige Daten aus einer CSV-Datei auswählen, bevor ich es mit Javascript (mit der d3-Bibliothek) laden. Diese

ist, wie ich die CSV laden:

d3.csv("data.csv", function(csv) { 
    vis.datum(csv).call(chart); 
     }); 

Und dies ist eine Probe der CSV-Datei:

Class,Age,Sex,Survived 
First Class,Adult,Male,Survived 
First Class,Adult,Male,Survived 
First Class,Adult,Male,Survived 
First Class,Adult,Male,Survived 
First Class,Adult,Male,Survived 
First Class,Adult,Female,Survived 
First Class,Adult,Female,Survived 
First Class,Adult,Female,Survived 
Second Class,Adult,Male,Perished 
Second Class,Adult,Male,Perished 
Second Class,Adult,Male,Perished 
Third Class,Adult,Male,Survived 
Third Class,Adult,Male,Survived 
Third Class,Adult,Male,Survived 
Third Class,Adult,Male,Survived 
Third Class,Adult,Male,Perished 
Third Class,Adult,Male,Perished 
Crew,Adult,Male,Perished 
Crew,Adult,Male,Perished 
Crew,Adult,Female,Survived 
Crew,Adult,Female,Survived 

Zum Beispiel habe ich nur die Second Class und First Class Zeilen, bevor ich wählenden Laden Sie es mit d3.csv.

Ich weiß, ich kann nur die anderen Zeilen in der CSV löschen, aber ich möchte eine Funktion machen, so dass der Benutzer auswählen kann, welche Kategorien er verwenden möchte. Ich hoffe, das macht Sinn.

Answer 1

Die schnelle Antwort ist, verwenden Sie .filter() die Zeilen auszuwählen, die Sie wollen, z.B .:

d3.csv("data.csv", function(csv) { 
    csv = csv.filter(function(row) { 
     return row['Class'] == 'Second Class' || row['Class'] == 'First Class'; 
    }) 
    vis.datum(csv).call(chart); 
}); 

Dies ist einfach, wenn Sie, der Codierer werden die Filter der Wahl. Wenn Sie dies jedoch durch Benutzerinteraktion auswählen müssen, müssen Sie eine komplexere Funktion erstellen. Unter der Annahme, dass Sie die Benutzerauswahl in einem Objekt gespeichert haben filters genannt, mit Schlüssel zu Ihrem Zeilen entsprechen, könnte eine Option wie folgt aussehen:

// an example filters object 
var filters = { 
    'Class': ['First Class', 'Second Class'], 
    'Sex': 'Female' 
}; 

d3.csv("data.csv", function(csv) { 
    csv = csv.filter(function(row) { 
     // run through all the filters, returning a boolean 
     return ['Class','Age','Sex','Survived'].reduce(function(pass, column) { 
      return pass && (
       // pass if no filter is set 
       !filters[column] || 
        // pass if the row's value is equal to the filter 
        // (i.e. the filter is set to a string) 
        row[column] === filters[column] || 
        // pass if the row's value is in an array of filter values 
        filters[column].indexOf(row[column]) >= 0 
       ); 
     }, true); 
    }) 
    console.log(csv.length, csv); 
}); 

(Sie müssen dies nicht tun mit .reduce(), aber Ich mag, wie sauber ist es.)

Wenn, wie es wahrscheinlich der Fall ist, Sie diese Filterung bei Ladezeit nicht tun wollen, aber stattdessen dynamisch filtern abhängig von Benutzereingaben, können Sie immer noch die Filterfunktion verwenden, aber Sie ' Ich möchte csv irgendwo im Speicher speichern und es im laufenden Betrieb filtern, vielleicht in einer update() Funktion, die durch Benutzerinteraktionen ausgelöst wird.