Фильтрация данных

Последнее обновление: 1.11.2015

С помощью функции filter() можно осуществить фильтрацию данных, что позволит управлять их визуализацией. Посмотрим на примере:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"> </script>
<style>
.item{
    margin-bottom: 7px;
    font-size: 12px;
    min-height: 20px;
    min-width: 20px;
	padding-right:3px;
	padding-top:8px;
    background-color: steelblue;
    text-align: right;
    color: #f0f8ff;
}
.unselected{
	display:none;
}
</style>
<body>
<select id="select" onchange="select()">
<option>All</option>
<option>Apple</option>
<option>Samsung</option>
</select><br /><br />
<div class="diagram">
</div>
<script type="text/javascript">

var phones = [ {name: 'iPhone 6', price: 64, company: 'Apple'},
{name: 'Samsung Galaxy Tab 4', price: 28, company:'Samsung'},
{name: 'iPhone 5s', price: 49, company: 'Apple'},
{name: 'Samsung Galaxy S5', price: 48, company:'Samsung'},
{name: 'iPad Air', price: 37, company: 'Apple'},
{name: 'Samsung Galaxy Note', price: 36, company:'Samsung'}];

function showGraph(phones, company){

d3.select('div.diagram').selectAll('div.item').data(phones).enter().append('div')
.attr('class', 'item').append('span');

d3.select('div.diagram').selectAll('div.item').data(phones)
.attr("class", "item").style('width', function (d) { return (d.price * 6) + 'px';})
.select('span').text(function (d) { return d.name;});

d3.select('div.diagram').selectAll('div.item').data(phones).exit().remove();

d3.select("div.diagram").selectAll("div.item")
.filter(function (d, i) {
	if(company && company!=='All')
		return !(d.company == company);
	else
		return false;
})
.classed("unselected", true);
}

function select() {
	var company = document.getElementById("select").value;
	showGraph(phones, company);
}

showGraph(phones);
</script>
</body>
</html>
Фильтрация данных в d3.js

Здесь также создаются диаграммы, как и в предыдущих темах. Но теперь также используется функция filter():

d3.select("div.diagram").selectAll("div.item")
.filter(function (d, i) {
	if(company && company!=='All')
		return !(d.company == company);
	else
		return false;
})
.classed("unselected", true);

Эта функция применяется ко всем элементам "div.item", то есть к столбикам диаграммы. В нее в качестве параметра передается функция, которая перебирает все объекты из связанного массива phones. Эта функция имеет два параматера: d - текущий перебираемый элемент из массива phones, который связан с одним из элементов "div.item", и i- индекс этого элемента в наборе.

Функция filter возвращает значение true или false в зависимости от условий. В данном случае при выборе в выпадающем списке в верху страницы выбранная компания попадает в переменную company. В функции filter мы сравниваем значение этой переменной с d.company. Если значения не равны, то возвращаем true, иначе и в остальных слуаях - false. Те элементы, для которых установлено true, передаются дальше.

Далее идет вызов метода classed, который для всех элементов, выбранных функцией filter, устанавливает класс "unselected". Этот класс скрывает на странице выбранные элементы.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850