d3 之deal with data
之前说慢慢写有关D3的笔记，结果做完那个拓扑图就没写了，今天发现关于d3的用法有点遗忘。感觉有回顾一遍的必要。
之前的序对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"
}
]
}
]
}
]
d3 之deal with data的更多相关文章
- [D3] Load and Inspect Data with D3 v4
You probably use a framework or standalone library to load data into your apps, but what if that’s o ...
- android how to deal with data when listview refresh
如何解决listview数据刷新,下拉刷新,上拉加载更多时,图片不闪烁. 在Activity的onResume()方法中将adaper和listView重新再绑定一次. listView.setAda ...
- D3数据绑定
这里转载一个非常经典的关于D3数据绑定的帖子,由D3作者自己写的,非常棒,以至于我忍不住全文copy到此. 原文地址 Thinking with Joins Say you’re making a b ...
- 【 D3.js 高级系列 — 3.0 】 堆栈图
堆栈图布局(Stack Layout)能够计算二维数组每一数据层的基线,以方便将各数据层叠加起来.本文讲解堆栈图的制作方法. 先说说什么是堆栈图. 例如,有如下情况: 某公司,销售三种产品:个人电脑. ...
- d3可视化实战00：d3的使用心得和学习资料汇总
最近以来,我使用d3进行我的可视化工具的开发已经3个月了,同时也兼用其他一些图表类库,自我感觉稍微有点心得.之前我也写过相关文章,我涉及的数据可视化的实现技术和工具,但是那篇文章对于项目开发而言太浅了 ...
- 【 D3.js 入门系列 — 2 】 绑定数据和选择元素
1. 如何绑定数据 D3 有一个很独特的功能:能将数据绑定到 DOM 上,也就是绑定到文档上.这么说可能不好理解,例如网页中有段落元素<p>,我们可以将整数 5 与 <p>绑定 ...
- 使用d3.v5实现折线图与面积图
d3最新是V5版的,比起V2的API变动了不少,写下我实现过程 效果图: 面积图: 折线图: 目录结构: <!DOCTYPE html> <html lang="en&qu ...
- D3 learning notes
D3 https://d3js.org/ 数据驱动文档显示, 利用 SVG HTML CSS技术. D3.js is a JavaScript library for manipulating doc ...
- 初探React与D3的结合-或许是visualization的新突破？
自诞生之初截止目前(2016年初),React可以说是前端界最流行的话题,如果你还不知道React是何物,你就该需要充充电了. d3是由纽约时报工程师开源的一个绘制基于svg的数据可视化工具,是近几年 ...
随机推荐
- zoj3672 Gao The Sequence
原地踏步了半年,感觉一切都陌生了~ 题意:a[i]-一个任意的数,这个数要等于a[1]~a[i-1]每个数减去任意一个数,经过多次这样的变换到达目标b序列,能到达就yes不能到达距no. 一开始各种分 ...
- [Ramda] Basic Curry with Ramda
var _ = R; /***************************************** C U R R Y I N G E X A M P L E **************** ...
- 优秀js插件收藏
1. 滚动视差效果,类似锤子主页等效果实现 https://github.com/hahnzhu/parallax.js 2. jQuery全屏滚动插件 http://www.dowebok.com/ ...
- C#中ROUND函数的问题 解决
ROUND()是C#中math的一个成员函数．System.Math.Round(),这个函数有四种用法,最长用的是对小数点位数的舍入．但这和现实生活中的“四舍五入”有一定区别,也有别JAVA中Mat ...
- 以WCF安全认证方式调用通用权限管理系统获取基础信息资料
在B/S开发中,涉及到获取系统基础资料的问题,因为是在不同平台下的开发,采用了WCF方式获取. 下面是一个调用通用权限管理系统(吉日嘎拉)基础信息资料的一个demo供参考 调用原理图: web.con ...
- 机器学习之AdaBoost
Adaboost是一种组合学习的提升算法,能将多个弱学习算法(甚至只比随机猜测好一点)组合起来,构成一个足够强大的学习模型. 组合学习 组合学习是将多个假说组合起来,并集成它们的预测.比如对于一个问题 ...
- ListView使用自定义适配器的情况下实现适配器的文本和图标控件点击事件执行Activity界面中的方法
ListView使用的是自定义适配器,列表项的布局文件中含有文本和图标,实现文本区域和图标区域的点击事件. 实现思路:在自定义适配器MyArrayAdapter 类型中自定义接口和接口方法,分别设置文 ...
- Angular 2 从0到1 （三）
作者:王芃 wpcfan@gmail.com 第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:A ...
- 软件设计师考试计算机系统知识——CPU
第一章: 计算机系统知识 1.1.1计算机系统硬件的基本组成 运算器.控制器.存储器.输入设备.输出设备 1.1.2 中央处理器 ①CPU的功能: a.程序控制:CPU通过执行指令来控制程序执行的顺序 ...
- ORACLE之PACKAGE
刚学pl/sql编程,写了两个package.pkg_temp_fn和pkg_temp_fn2.内容涉及pl/sql基本语法,游标,存储过程(in,out),函数(有返回值). pkg_temp_fn ...