16

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 Classd3.csv

CSVの他の行を削​​除できることはわかっていますが、ユーザーが使用するカテゴリを選択できるように関数を作成したいと思います。それが理にかなっていることを願っています。

4

1 に答える 1

32

簡単な答えは、使用.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、1つのオプションは次のようになります。

// 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()ユーザーの操作によってトリガーされる関数で、その場でそれを実行します。

于 2012-05-17T23:12:18.183 に答える