在使用 javascript（d3 库）加载之前从 CSV 中选择数据

Select data from a CSV before loading it with javascript (d3 library)

提问by user1386906

I want to select some data out of a CSV file before i load it with javascript (with the d3 library).

我想在使用 javascript（使用 d3 库）加载之前从 CSV 文件中选择一些数据。

This is how i load the CSV:

这是我加载 CSV 的方式：

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

And this is a sample of the CSV file:

这是 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

For example i want only to select the Second Classand First Classrows before i load it with d3.csv.

例如，我只想在加载之前选择Second Class和First Class行d3.csv。

i know i can just delete the other rows in the CSV, but i want to make a function so that the user can select what categories he want to use. I hope that makes some sense.

我知道我可以删除 CSV 中的其他行，但我想创建一个函数，以便用户可以选择他想要使用的类别。我希望这有点道理。

回答by nrabinowitz

The quick answer is, use .filter()to select the rows you want, e.g.:

快速回答是，用于.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);
});

This is easy if you, the coder, are choosing the filters. If you need this to be chosen by user interaction, however, you're going to need to build out a more complex function. Assuming that you have saved the user choices in an object called filters, with keys corresponding to your rows, one option might look like:

如果您，编码员，选择过滤器，这很容易。但是，如果您需要通过用户交互来选择它，那么您将需要构建一个更复杂的功能。假设您已将用户选择保存在名为 的对象中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);
});

(You don't have to do this with .reduce(), but I like how clean it is.)

（你不必这样做.reduce()，但我喜欢它的干净程度。）

If, as is probably the case, you don't want to do this filtering at load time, but instead filter dynamically depending on user input, you can still use the filter function, but you'll want to store csvin memory somewhere and filter it on the fly, perhaps in an update()function triggered by user interactions.

如果，可能是这种情况，您不想在加载时进行此过滤，而是根据用户输入动态过滤，您仍然可以使用过滤器功能，但您希望将其存储csv在内存中的某处并进行过滤它是动态的，可能是在update()用户交互触发的功能中。