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的数据可视化工具,是近几年 ...
随机推荐
- IOS 手绘地图导航
手绘地图导航 第三方库 NAMapKit, 1)支持在手绘图上标记.缩放 2)支持在单张图片 3)支持瓦片小图片 思路 前提:美工已经切好手绘图,并告知我们当前的缩放级别. 1)确定好手绘图左上角点在 ...
- ios开发——实用技术篇OC篇&获取内存使用情况
获取内存使用情况 iOS 获取 当前设备 可用内存 及当前 应用 所占内存 (-- ::) 转载 ▼ 标签: ios 设备 可用内存 所占内存 内存 it 分类: iOS // 获取当前设备可用内存及 ...
- xtrabackup原理0
- LINUX 运维命令
查看3306端口被什么程序占用 [root@DB13 ~]# lsof -i : COMMAND PID USER FD TYPE DEVICE SIZE NODE NAME mysqld mysql ...
- 用PC浏览器模拟手机浏览器（一）：无扩展版
想浏览手机版,打开对应网址却跳转到PC版?怎么办? 下面咱们来说下在只是安装了浏览器,无需其他安装操作的情况下来怎么用PC浏览器模拟手机浏览器,然后访问手机站点. 浏览器众多,IE系列的咱就不考虑了, ...
- C#轻型ORM框架PetaPoco试水
近端时间从推酷app上了解到C#轻微型的ORM框架--PetaPoco.从github Dapper 开源项目可以看到PetaPoco排第四 以下是网友根据官方介绍翻译,这里贴出来. PetaPoco ...
- css3 一些属性
==text-shadow== 语法:text-shadow: x-offset y-offset blur-radius color text-shadow:X 轴偏移量 Y轴偏移量 模糊半径 阴影 ...
- Android调用相册截取图片遇到的问题
1.在Android中可以使用如下的方式来调用相册,选择图片进行裁剪使用,昨天在开发的时候遇到一个问题 private void cropBigImageUri(Uri uri, int output ...
- CentOS(四)--Linux系统的启动级别
对于绝大多数Linux程序员来说,进入Linux系统后一般看到的是黑乎乎的界面(开发模式),因为系统如果启动选择开发模式,会减少启动时间,优化内存等.但是通常我们刚安装完Linux系统,然后进去以后是 ...
- oracle锁
1.概念 数据库中有两种基本的锁类型:排它锁(Exclusive Locks,即X锁)和共享锁(Share Locks,即S锁). 当数据对象被加上排它锁时,其他的事务不能对它读取和修改:加了共享锁的 ...