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的数据可视化工具,是近几年 ...
随机推荐
- 4.Maven概念模型，maven的生命周期，Maven坐标，依赖管理（依赖范围，依赖声明），仓库管理，私服概念
1 maven概念模型 2 maven的生命周期,项目构建过程 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG90b3R1enVvcXVhbg== ...
- [Ramda] Basic Curry with Ramda
var _ = R; /***************************************** C U R R Y I N G E X A M P L E **************** ...
- 简化LINUX的命令输入 简化linux命令
在LINUX中,有很多常用的命令,常用的命令我们可以熟练的记忆,但是对于不经常使用的命令恐怕是需要翻阅手册了,但是我们可以简化这些命令的输入来达到简便记忆的效果. 这里以BSH为例: 编辑/etc/b ...
- PhpCMS标签：专题模块special标签
专题模块 专题模块PC标签调用说明 模块名:special 模块提供的可用操作 操作名 说明 lists 专题列表 content_list 专题信息列表 hits 专题信息点击排序 下面对所有的操作 ...
- Calendar Game
http://poj.org/problem?id=1082 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 4820 A ...
- Java设计模式12：常用设计模式之外观模式（结构型模式）
1. Java之外观模式(Facade Pattern) (1)概述: 现代的软件系统都是比较复杂的,设计师处理复杂系统的一个常见方法便是将其"分而治之",把一个系统划 ...
- jqcss选择器
$("p").css("background-color","red"); $(this) 当前 HTML 元素$("p" ...
- android开发之路07（无硝烟的战争）
如何做一名优秀的android面试官? 如何做一名优秀的android候选者? 提到这个问题我不得不提起我们小升初,初升高,高生升本这几个历程中我们与出题人之间的无硝烟的战争.我们总是为自己的成绩担心 ...
- 最短路径之Dijkstra算法及实例分析
Dijkstra算法迪科斯彻算法 Dijkstra算法描述为:假设用带权邻接矩阵来表示带权有向图.首先引进一个辅助向量D,它的每个分量D[i]表示当前所找到的从始点v到每个终点Vi的最短路径.它的初始 ...
- 关于docker中的几个小命令
问题 A VirtualBox machine with the name 'vagrant_c__devops_docker_vagrant' already exists. 解决命令:VBoxMa ...