Chọn dữ liệu từ CSV trước khi tải nó bằng javascript (thư viện d3)

Question

Tôi muốn chọn một số dữ liệu trong tệp CSV trước khi tôi tải nó bằng javascript (với thư viện d3).

Đây là cách tôi nạp CSV:

d3.csv("data.csv", function(csv) { 
    vis.datum(csv).call(chart); 
     }); 

Và đây là một ví dụ về các tập tin 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 

Ví dụ tôi muốn chỉ để chọn Second Class và First Class hàng trước khi tôi tải nó với d3.csv.

tôi biết tôi chỉ có thể xóa các hàng khác trong CSV, nhưng tôi muốn tạo một hàm để người dùng có thể chọn danh mục mà anh ấy muốn sử dụng. Tôi hy vọng rằng một số ý nghĩa.

Answer 1

Câu trả lời nhanh chóng, bạn dùng .filter() để chọn hàng bạn muốn, ví dụ .:

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

Đây là dễ dàng nếu bạn, các coder, đang lựa chọn các bộ lọc. Nếu bạn cần điều này được lựa chọn bởi sự tương tác của người dùng, tuy nhiên, bạn sẽ cần phải xây dựng một hàm phức tạp hơn. Giả sử rằng bạn đã lưu lựa chọn người dùng trong một đối tượng gọi filters, với các phím tương ứng với hàng của bạn, một lựa chọn có thể trông giống như:

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

(Bạn không cần phải làm điều này với .reduce(), nhưng tôi thích như thế nào Nếu nó có lẽ là trường hợp, bạn không muốn thực hiện việc lọc này tại thời gian tải, mà thay vào đó sẽ tự động lọc tùy thuộc vào đầu vào của người dùng, bạn vẫn có thể sử dụng chức năng lọc, nhưng bạn '' sẽ muốn lưu trữ csv trong bộ nhớ ở đâu đó và lọc nó khi đang di chuyển, có lẽ trong một hàm update() được kích hoạt bởi tương tác của người dùng.