Сортировка данных

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

Для сортировки используется метод sort(), которая использует функцию-компаратор для сравнения данных:

<!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;
}
</style>
<body>
<select id="select" onchange="sort()">
<option selected disabled>Режим сортировки</option>
<option value="compareByCompany">По компании</option>
<option value="compareByPrice">По цене</option>
<option value="compareByName">По названию</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, comparator){

	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();
	if(comparator){
		d3.select("div.diagram").selectAll("div.item").sort(comparator);
	}
}

var compareByName = function (a, b) { // <-F
	return a.name < b.name?-1:1;
};
var compareByPrice = function (a, b) { // <-G
	return a.price < b.price?-1:1;
};
var compareByCompany = function (a, b) { // <-G
	return a.company < b.company?-1:1;
};

function sort() {
	var comparator = document.getElementById("select").value;
	switch(comparator){
	
		case "compareByCompany" : 
			comparator= compareByCompany;
			break;
		case "compareByName" : 
			comparator= compareByName;
			break;
		case "compareByPrice" : 
			comparator= compareByPrice;
			break;
	}
	
	showGraph(phones, comparator);
}

showGraph(phones);
</script>
</body>
</html>
Сортировка в d3.js

Поскольку каждый объект в массиве phones имеет три свойства, здесь определены три функции для сравнения объектов по этим свойствам. Их логика очень простая, если цена первого объекта больше второго, то возвращается 1, иначе -1. И то же самое для названий и компаний. Хотя при желании можно определить и более сложную логику сравнения.

Затем эта функция передается в метод sort:

if(comparator){
	
	d3.select("div.diagram").selectAll("div.item").sort(comparator);
}

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

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