Вопрос по javascript – Выберите данные из CSV перед загрузкой их с помощью JavaScript (библиотека d3)

16

Я хочу выбрать некоторые данные из файла CSV, прежде чем загрузить его с помощью JavaScript (с библиотекой d3).

Вот как я загружаю CSV:

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

И это образец файла 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

Например, я хочу только выбратьSecond Class а такжеFirst Class строк, прежде чем загрузить егоd3.csv.

я знаю, что могу просто удалить другие строки в CSV, но я хочу создать функцию, чтобы пользователь мог выбирать, какие категории он хочет использовать. Я надеюсь, что это имеет смысл.

Вы нашли перекрестный фильтр?square.github.com/crossfilter PhoebeB
нет я не имел. Спасибо! это очень полезно :) user1386906

Ваш Ответ

1   ответ
30

Быстрый ответ, используйте.filter() выбрать нужные строки, например:

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

Это легко, если вы, кодер, выбираете фильтры. Однако если вам нужно, чтобы это было выбрано при взаимодействии с пользователем, вам понадобится создать более сложную функцию. Предполагая, что вы сохранили выбор пользователя в объекте с именемfiltersс ключами, соответствующими вашим строкам, одна опция может выглядеть так:

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

(Вы не должны делать это с.reduce(), но мне нравится, насколько он чистый.)

Если, как, вероятно, имеет место, вы не хотите выполнять эту фильтрацию во время загрузки, но вместо этого динамически фильтруете в зависимости от пользовательского ввода, вы все равно можете использовать функцию фильтра, но вы хотите сохранитьcsv в памяти где-то и отфильтровать его на лету, возможно, вupdate() функция вызвана взаимодействиями с пользователем.

Error: User Rate Limit Exceededd3.csvError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded user1386906

Похожие вопросы