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的数据可视化工具,是近几年 ...
随机推荐
- Java多线程中start()和run()的区别
Java的线程是通过java.lang.Thread类来实现的.VM启动时会有一个由主方法所定义的线程.可以通过创建Thread的实例来创建新的线程.每个线程都是通过某个特定Thread对象所对应的方 ...
- iOS10全新推送功能的实现
从iOS8.0开始推送功能的实现在不断改变,功能也在不断增加,iOS10又出来了一个推送插件的开发(见最后图),废话不多说直接上代码: 在开始之前需要打开一个推送开关,不然无法获取deviceToke ...
- Boxes in a Line
Boxes in a Line You have n boxes in a line on the table numbered 1 . . . n from left to right. Your ...
- css笔记08：id选择器之父子选择器
1.父子选择器 (1)01.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- dem30下载地址
http://www.gscloud.cn/listdata/listdata_new.shtml?from=&productId=311#Wzg4LFswLDEwLDEsMF0sW10sW1 ...
- tomcat部署应用的几种方式
接着上篇 tomcat配置详解,再来学习下如何在tomcat下部署应用 1.部署方式 第一种,最常用,直接把WAR包或者文件夹直接放到webapps目录下面,这时访问路径就是WAR包或者文件夹的名称. ...
- Wince 对话框程序设计
如何编程实现wince下“打开文件夹对话框”呢?这里就要涉及到下面要分析的知识了,对话框是一种特殊的窗口,它在wince 作为应用程序和程序使用者之间的交流窗口,通过显示和获取信息使人们的交流更加方便 ...
- C#控制台程序 使用 Server.MapPath,
(1)添加引用 System.Web. (2)在类中填写 using System.Web 命名空间. (3)写法为: System.Web.HttpContext.Current.Server.Ma ...
- 如何通过PhpMyAdmin批量删除MYSQL数据库数据表
使用这个方法前,强烈建议先备份整个数据库.至于怎么备份?你不会么?在本文下方留言吧. 具体方法:复制下面的php执行语句,保存为sql.php文件(注意配置数据库名称.密码.数据表头),通过ftp上传 ...
- Commons JXPath - DOM/JDOM Document Access
除了 JavaBean,JXPath 也可以访问 DOM/JDOM. 示例 XML: <?xml version="1.0" encoding="utf-8&quo ...