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

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

这是我加载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

例如，在加载

d3.csv

之前，我只想选择

Second Class

和

First Class

行

---

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

快速回答是，使用

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

这是很容易的，如果你，编码器，选择过滤器。但是，如果您需要通过用户交互来选择它，则需要构建一个更复杂的函数。假设您已将用户选项保存在名为

过滤器

的对象中，其中键对应于您的行，则一个选项可能如下所示：

// 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（）中

由用户交互触发的功能。

您找到交叉过滤器了吗？不，我没有。谢谢！这很有帮助：）谢谢你全面的回答！这正是我所需要的。我相信这个答案现在已经过时了

d3.csv

的第二个参数现在是行解析器。D3V5使用承诺/异步/等待等。。