Sélectionnez les données d'un fichier CSV avant de le charger avec javascript (bibliothèque d3)

Je veux sélectionner des données d'un fichier CSV avant de me charger avec javascript (avec le d3 de la bibliothèque).

C'est comment je charge le format CSV:

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

Et ceci est un exemple de fichier CSV:

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

Par exemple je veux que pour sélectionner les Second Class et First Class lignes avant de me charger avec d3.csv.

je sais que je peux juste supprimer les autres lignes dans le fichier CSV, mais je veux faire une fonction de sorte que l'utilisateur peut choisir les catégories qu'il veut utiliser. J'espère que le fait un certain sens.

source d'informationauteur user1386906

  1. 30

    La réponse rapide est l'utilisation .filter() pour sélectionner les lignes que vous voulez, par exemple:

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

    C'est facile si vous, le codeur, de choisir les filtres. Si vous avez besoin d'être choisie par l'interaction de l'utilisateur, cependant, vous allez avoir besoin de construire une fonction plus complexe. En supposant que vous avez enregistré le choix de l'utilisateur dans un objet appelé filtersavec des touches correspondant à vos lignes, une option pourrait ressembler à:

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

    (Vous n'avez pas à le faire avec .reduce()mais j'aime bien comment nettoyer c'est.)

    Si, comme c'est probablement le cas, vous ne voulez pas faire ce filtrage au moment du chargement, mais à la place du filtre dynamiquement en fonction de l'entrée utilisateur, vous pouvez toujours utiliser la fonction de filtre, mais vous aurez envie de magasin csv en mémoire quelque part et le filtre à la volée, peut-être dans un update() fonction déclenchée par les interactions de l'utilisateur.