Ответ 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 value is equal to the filter
// (i.e. the filter is set to a string)
row[column] === filters[column] ||
// pass if the row value is in an array of filter values
filters[column].indexOf(row[column]) >= 0
);
}, true);
})
console.log(csv.length, csv);
});
(Вам не нужно делать это с помощью .reduce()
, но мне нравится, насколько он чист.)
Если, как это возможно, вы не хотите делать эту фильтрацию во время загрузки, а вместо этого динамически фильтруйте в зависимости от пользовательского ввода, вы все равно можете использовать функцию фильтра, но вы захотите сохранить csv
где-то в памяти и фильтровать его "на лету", возможно, в функции update()
, вызванной пользовательскими взаимодействиями.