zoukankan      html  css  js  c++  java
  • 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>
    

     

      

    这是我的个人日记本
  • 相关阅读:
    JsCV Core v0.2发布 & Javascript图像处理系列目录
    Javascript图像处理
    SOE开发之IMapServerSourceDescription
    SOE之JSONObject
    SOE开发之adddynamiclayertomapserver
    JavaScript 的 async/await
    ArcGIS Engine开发系列:将地图导出为图片的两种方法(ZZ)
    原型链
    更优美的javaScript(2)
    CSS选择器
  • 原文地址:https://www.cnblogs.com/valentineisme/p/4223870.html
Copyright © 2011-2022 走看看