D3.js学习
// 1.选择
d3.select('p')
d3.selectAll('p')
d3.select('.txt').style('color', '#fff')
// 2.支持动态设置属性
// a:随机属性
d3.selectAll('p').style('color', function (d, i) {
return 1 % 2 ? '#fff' : '#eee'
})
// b.将数组中的属性设置给元素
d3.selectAll('p')
.data([4, 8, 15, 16, 23, 42])
.style('font-size', function (d) {
return d + 'px'
});
// enter操作:添加DOM
d3.select('body')
.selectAll('p')
.data([4, 8, 15, 16, 23, 42])
.enter()
.append('p')
.text(function (d) {
return 'i am number' + d + '!'
})
// 数据和元素一样
var p = d3.select('body')
.selectAll('p')
.data([4, 8, 15, 16, 23, 42])
.text(function (d) {
return d
})
// exit操作:删除DOM
var p = d3.select('body')
.selectAll('p')
.data([4, 8, 15, 16, 23, 42])
.text(function (d) {
return d;
})
p.exit().remove()
// 不确定数据多少的情况下,可以三种方法一起使用;
var p=select('body')
.selectAll('p')
.data([4, 8, 15, 16, 23, 42])
.text(function(d){return d;})
p.enter().append('p').text(function(d){return d;})
p.exit().remove()
// classed:设置元素的类class一个或者多个
// var p = d3.select('body').select('p').classed('test foo', true)
// attr:设置元素的属性,selection.attr(name[,value]),如果value是一个函数,参数为d和i
// var p = d3.select('body').selectAll('p').data('2').attr('title',function(d){return d;})
// selection.style(name,[,value[,priority]])设置元素的样式;
// selection.style({'stroke': 'black', 'stroke-width': 2})
// selection.property:可设置元素的属性,如checkbox的选中等;
// d3.select('.check').property('checked',true)
D3的布局:
一共有12种,这些布局的作用都是将某种数据转换成另一种数据,而转换后的数据是利于可视化的;
D3.js学习的更多相关文章
- 数据可视化的优秀入门书籍有哪些,D3.js 学习资源汇总
习·D3.js 学习资源汇总 除了D3.js自身以外,许多可视化工具包都是基于D3开发的,所以对D3的学习就显得很重要了,当然如果已经有了Javascript的经验,学起来也会不费力些. Github ...
- D3.js学习(一)
从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...
- D3.js学习记录【转】【新】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- D3.js学习笔记(六)——SVG基础图形和D3.js
目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...
- d3.js学习笔记(五)——将数据结构化为D3.js可处理的
目标 在这一章,你将会理解如何对数据进行结构化,来更好的使用D3.js. 我们将会回顾我们之前已经学习的,学习D3.js如何使用选集(selections),JavaScript对象基础,以及如何最优 ...
- D3.js学习笔记(一)——DOM上的数据绑定
开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细.从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解.学习的时候,就顺便翻译成中文 ...
- D3.js学习(七)
上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...
- D3.js学习记录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- D3.js学习笔记(四)—— 使用SVG坐标空间
目标 在这一章,你将要使用D3.js基于一些数据把SVG元素添加到你想要的坐标位置上. 我们的目标就是使用下面的数据集: var spaceCircles = [30,70,110]; 并使用D3.j ...
- D3.js学习笔记(三)——创建基于数据的SVG元素
目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始, ...
随机推荐
- DP-hdu1176
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1176 这道题与动态规划中的数塔问题十分类似,因此如果对于数塔问题还不太明白的,可以先参考一下博客: 数 ...
- UVA 11624-Fire!【双BFS】
<题目链接> 题目大意: 你的任务是帮助J走出一个大火蔓延的迷宫.J每分钟可以超上下左右四个方向移动,而所有着火的格子每一分钟都会往四个方向蔓延一格.迷宫中有一些障碍,J和火都无法进入.当 ...
- HDU 6114 Chess【逆元+组合数】(组合数模板题)
<题目链接> 题目大意: 車是中国象棋中的一种棋子,它能攻击同一行或同一列中没有其他棋子阻隔的棋子.一天,小度在棋盘上摆起了许多車……他想知道,在一共N×M个点的矩形棋盘中摆最多个数的車使 ...
- Python学习——深浅拷贝
1.对于 数字 和 字符串 而言,赋值.浅拷贝和深拷贝无意义,因为其永远指向同一个内存地址. >>> import copy # ######### 数字.字符串 ######### ...
- php快速无限遍历递归文件夹目录、子文件,支持绝对路径和相对路径,支持返回生成数组
支持无限极遍历子文件及文件夹,支持绝对路径和相对路径! 函数说明:array glob ( string $pattern [, int $flags ] )功能:寻找与模式匹配的文件路径,返回包含匹 ...
- AD软件原理图封装过程(即由原理图转换到PCB)
第一步:先画出你所要的原理图 第二步:点击菜单栏的工具→封装管理器,进去封装管理器页面,点击左边的每一个元件, 然后选择封装时的元器件,再点击右边的确定(每一个元器件确定好封装要用的元件都要点确定) ...
- 闪烁的LED灯
/* Main.c file generated by New Project wizard * * Created: 周五 五月 5 2017 * Processor: 80C31 * Compil ...
- Android getWidth和getMeasuredWidth
1. 在一个类初始化时,即在构造函数当中我们是得不到View的实际大小的.感兴趣的朋友可以试一下,getWidth()和getMeasuredWidth()得到的结果都是0.但是我们可以从onDraw ...
- C++学习笔记42:进程管理
子进程异步清除 SIGCHLD信号:子进程终止时,向父进程自动发送,编写此信号处理例程,异步清除子进程 #include <signal.h> #include <string.h& ...
- win2008R2管理员密码修改文档
场景:忘记了win2008R2服务器的管理员密码.解决办法:1. 制作一个U盘启动盘:2. 系统通过U盘启动进入WINpe系统3. 在知道Win2008安装位置的情况下:查找C:\windows\sy ...