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()执行此操作，但我喜欢它有多干净。）

如果可能是这种情况，你不想在加载时进行这种过滤，而是根据用户输入动态过滤，你仍然可以使用过滤功能，但是你想要存储{{ 1}}在某个地方的内存中并且可以在用户交互触发的csv函数中动态过滤它。

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

1 个答案: