d3 之deal with data
2015-11-08 19:30
162 查看
之前说慢慢写有关D3的笔记,结果做完那个拓扑图就没写了,今天发现关于d3的用法有点遗忘。感觉有回顾一遍的必要。
之前的序对D3有一个简单的介绍,下面就做一些细节的东西。主要是贴代码,顺带注释和效果图。
sort 对数据进行排序,.sort(comparator);
nest 多级聚类
之前的序对D3有一个简单的介绍,下面就做一些细节的东西。主要是贴代码,顺带注释和效果图。
<html> <head> <meta charset="utf-8"> <title>d3研究室</title> <style> .h-bar{ width:21px; background-color: chartreuse; text-align: start; border:solid 1px black; display: inline-block; } </style> </head> <body> <script src="./d3.v3.min.js" charset="utf-8"></script> <script> var data=[]; for(var i=0;i<10;i++){ data.push(Math.ceil(Math.random()*100)); } var render=function(){ //enter 计算数据与显示元素的差集,补充不足 d3.select("body").selectAll("div.h-bar") .data(data) .enter() .append("div") .attr("class",'h-bar') .append("span"); //update 更新内容 d3.select("body").selectAll("div.h-bar") .data(data) .style("height",function(d,i){ console.log('item'+i+":"+d); return (d*3)+"px"; }) .select("span") .text(function(d){ return d; }); //exit 删掉多于的元素 d3.select("body").selectAll("div.h-bar") .data(data) .exit() .remove(); }; setInterval(function(){ data.shift(); data.push(Math.ceil(Math.random()*100)) render(); },1500); </script> </body> </html>
将函数作为数据
上面那个示例中绑定的数据是一个纯数字,其实绑定什么类型的数据并没有严格的限定,完全取决于应用场景。甚至可以将函数作为数据绑定到视图上。<html> <head> <meta charset="utf-8"> <title>d3研究室</title> <style> .h-bar{ width:15px; background-color: chartreuse; text-align: right; border:solid 1px black; display: inline-block; margin-left:3px; } </style> </head> <body> <script src="./d3.v3.min.js" charset="utf-8"></script> <script> var data=[]; //生成将要绑定到视图的函数 var d_func=function(u){ return function(x){ return u+x*x; } }; //添加新的数据 var newData=function(){ data.push(d_func(Math.floor(Math.random()*20))); return data; }; //重新渲染视图 var render=function(){ var selection=d3.select("body").selectAll("div.h-bar") .data(newData());//这里也可以直接传newData这个函数,d3自己会去执行 selection.enter() .append("div") .attr("class",'h-bar') .append("span"); selection.exit() .remove(); selection.attr("class","h-bar") .style("height",function(d,i){ return d(i)+"px";//注意这里的d是一个函数 }) .select("span").text(function(d,i){ return d(i); }); }; setInterval(function(){ render(); },1500); </script> </body> </html>
一些数据处理工具
filter 过滤数据,在数据反映到视图前调用,.filter(function(){return true/false;})sort 对数据进行排序,.sort(comparator);
nest 多级聚类
var records = [ {quantity: 2, total: 190, tip: 100, type: "tab"}, {quantity: 2, total: 190, tip: 100, type: "tab"}, {quantity: 1, total: 300, tip: 200, type: "visa"}, {quantity: 2, total: 90, tip: 0, type: "tab"}, {quantity: 2, total: 90, tip: 0, type: "tab"}, {quantity: 2, total: 90, tip: 0, type: "tab"}, {quantity: 1, total: 100, tip: 0, type: "cash"}, {quantity: 2, total: 90, tip: 0, type: "tab"}, {quantity: 2, total: 90, tip: 0, type: "tab"}, {quantity: 2, total: 90, tip: 0, type: "tab"}, {quantity: 2, total: 200, tip: 0, type: "cash"}, {quantity: 1, total: 200, tip: 100, type: "visa"} ]; var nest = d3.nest() .key(function (d) { // 第一级按type分类 return d.type; }) .key(function (d) { // 第二级按tip分类 return d.tip; }) .entries(records); // 执行分类策略 //分类的结果,即nest的值 { "key" : "tab", "values" : [{ "key" : "100", "values" : [{ "quantity" : 2, "total" : 190, "tip" : 100, "type" : "tab" }, { "quantity" : 2, "total" : 190, "tip" : 100, "type" : "tab" } ] }, { "key" : "0", "values" : [{ "quantity" : 2, "total" : 90, "tip" : 0, "type" : "tab" }, { "quantity" : 2, "total" : 90, "tip" : 0, "type" : "tab" }, { "quantity" : 2, "total" : 90, "tip" : 0, "type" : "tab" }, { "quantity" : 2, "total" : 90, "tip" : 0, "type" : "tab" }, { "quantity" : 2, "total" : 90, "tip" : 0, "type" : "tab" }, { "quantity" : 2, "total" : 90, "tip" : 0, "type" : "tab" } ] } ] }, { "key" : "visa", "values" : [{ "key" : "200", "values" : [{ "quantity" : 1, "total" : 300, "tip" : 200, "type" : "visa" } ] }, { "key" : "100", "values" : [{ "quantity" : 1, "total" : 200, "tip" : 100, "type" : "visa" } ] } ] }, { "key" : "cash", "values" : [{ "key" : "0", "values" : [{ "quantity" : 1, "total" : 100, "tip" : 0, "type" : "cash" }, { "quantity" : 2, "total" : 200, "tip" : 0, "type" : "cash" } ] } ] } ]
相关文章推荐
- java继承课后作业
- Hdoj 1317 XYZZY
- Spark GraphX(一)
- 软件工程师考试总结
- C#语言 数组
- H5性能调优
- 黑马程序员——OC学习笔记 类的进阶使用
- 【或许要说再见】NOIP2015游记
- Android Studio导入github的开源项目,Slidingmenu为例
- 兼容各个浏览器和各个分辨率
- 典型用户
- JSP
- poj 2752 Seek the Name, Seek the Fame
- leetcode[53]Maximum Subarray
- 如何将Java源代码文件的编码从GBK转为UTF-8?
- 《软件需求模式》阅读笔记之二
- validates_confirmation_of 验证时没反应问题解决
- QL Server 查看所有数据库所有表大小信息(Sizes of All Tables in All Database)【复杂版本】
- hdoj--1276--士兵队列训练问题(数组模拟)
- Python 运算符