d3.js学习5

数据筛选selection.filter

---

var data=[
	{expense:10,category:"Retail"},
	{expense:15,category:"Gas"},
	{expense:30,category:"Retail"},
	{expense:50,category:"Dining"},
	{expense:80,category:"Gas"},
	{expense:65,category:"Retail"},
	{expense:55,category:"Gas"},
	{expense:30,category:"Dining"},
	{expense:20,category:"Retail"},
	{expense:10,category:"Dining"},
	{expense:8,category:"Gas"}
];

function render(data,category){
	var selection=d3.select("body")
	.selectAll("div.h-bar")
	.data(data);
	//enter
	selection.enter()
	.append("div")
	.attr("class","h-bar")
	.append("span");
	//remove
	selection.exit().remove();
	//exit
	selection.attr("class","h-bar")
	.style("width",function(d){
	return (d.expense*5)+"px";
	})
	.select("span")
	.text(function(d){
		return d.category;
	});

	//filter
	d3.select("body").selectAll("div.h-bar")
	.filter(function(d,i){
		return d.category==category;
	})
	.classed("selected",true);
}
render(data);

function select(category){
	render(data,category);
}

样例来源于D3.js数据可视化实战手册

数据排序comparator，数据同上例

---

function render(data,comparator){
	var selection=d3.select("body")
	.selectAll("div.h-bar")
	.data(data);
	//enter
	selection.enter()
	.append("div")
	.attr("class","h-bar")
	.append("span");
	//remove
	selection.exit().remove();
	//update
	selection.attr("class","h-bar")
	.style("width",function(d){
		return (d.expense*5)+"px";
	})
	.select("span")
	.text(function(d){
		return d.category;
	});
	//sort
        if(comparator){
		d3.select("body")
		.selectAll("div.h-bar")
		.sort(comparator);
	}
}

var compareByExpense=function(a,b){
	return a.expense < b.expense ?-1 : 1;
};
var compareByCategory=function(a,b){
	return a.category < b.category ? -1 : 1;
};

render(data);

function sort(comparator){
	render(data,comparator);
}

div class="control-group">
	<button onclick="sort(compareByExpense)">
		sort by expense
	</button>
	<button onclick="sort(compareByCategory)">
		sort by category
	</button>
	<button onclick="sort()">
	        clear
	</button>
</div>