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的数据可视化工具,是近几年 ...
随机推荐
- Android 实现书籍翻页效果----完结篇
By 何明桂(http://blog.csdn.net/hmg25) 转载请注明出处 之前由于种种琐事,暂停了这个翻页效果的实现,终于在这周末完成了大部分功能,但是这里只是给出了一个基本的雏形,没有添 ...
- Ruby on Rails Tutorial 第一章 之 简介
1.目标:掌握MVC和REST.生成器.迁移.路由.嵌入式Ruby 本书涉及Rails,Ruby语言,Rails默认使用的测试框架(MiniTest),Unix命令行,HTML,CSS,少量的Java ...
- 今天分享一个抽奖的类Lottery
/* * Copyright (C) 2014 Jason Fang ( ijasonfang@gmail.com ) * * Licensed under the Apache License, V ...
- divide-conquer-combine(4.1 from the introduction to algorithm)
this example is from chapter 4 in <the introduction to algorithm> the main idea is all showed ...
- boost库在工作（36）网络服务端之六
在上面介绍了管理所有连接的类,这个类主要就是添加新的连接,或者删除不需要的连接.但是管理的类CAllConnect是没有办法知道什么时候添加,什么时候删除的,它需要从接收到连接类里获取得到新的连接,从 ...
- Message Decoding
Some message encoding schemes require that an encoded message be sent in two parts. The first part, ...
- Android（java）学习笔记103：Map集合的获取功能
package cn.itcast_01; import java.util.Collection; import java.util.HashMap; import java.util.Map; i ...
- Extjs之success、failure
Ext.form.Action.Submit的配置选项success.failure是根据返回json中success属性判断的,如果success为true,则success,false则failu ...
- poj 2411 状态压缩dp
思路:将每一行看做一个二进制位,那么所有的合法状态为相邻为1的个数一定要为偶数个.这样就可以先把所有的合法状态找到.由于没一层的合法状态都是一样的,那么可以用一个数组保存.由第i-1行到第i行的状态转 ...
- hdu3584 树状数组
思路:从一维扩展到三维.可以看看poj2155的解法. #include<iostream> #include<cstring> #include<algorithm&g ...