CSVからデータを選択してからjavascript（d3ライブラリ）を読み込みます。

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

は、あなたがしたい行、例えば：

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

あなたは、コーダは、フィルタを選択している場合、これは簡単ですを選択し.filter()を使用しています。しかし、これをユーザインタラクションによって選択する必要がある場合は、より複雑な機能を構築する必要があります。あなたがオブジェクトにユーザーの選択を保存していると仮定すると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()関数でその場でフィルタリングします。