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

Question

我想在使用javascript(使用d3库)加载之前从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

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

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

Answer 1

快速回答是,用于.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()用户交互触发的功能中.