D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的。

  D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度。由于它本质上是 JavaScript ,所以用 JavaScript 也是可以实现所有功能的,但它能大大减小你的工作量,尤其是在数据可视化方面,D3 已经将生成可视化的复杂步骤精简到了几个简单的函数,你只需要输入几个简单的数据,就能够转换为各种绚丽的图形。

一、使用与安装

  D3 是一个 JavaScript 函数库,并不需要通常所说的“安装”。它只有一个文件,在 HTML 中引用即可。有两种方法:

(1)下载 D3.js 的文件

  解压后,在 HTML 文件中包含相关的 js 文件即可。

(2)还可以直接包含网络的链接,这种方法较简单:

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

  但使用的时候要保持网络连接有效,不能再断网的情况下使用。

二、用D3的一个小实例

  使用 D3.js 来修改p标签的两行,只需添加一行代码即可。注意不要忘了引用 D3.js 源文件。

<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World </p>
<p>Hello World </p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
d3.select("body").selectAll("p").text("www.ourd3js.com");
</script>
</body>
</html>

  其实 D3.js 中的所有功能在 JavaScript 中都能实现,它仅仅是一个函数库而已。D3 所做的事就是减轻你的工作量,以及使你的代码十分简单易懂。

  接下来改变字体的颜色和大小,稍微修改上述代码:

  //选择<body>中所有的<p>,其文本内容为 www.ourd3js.com,选择集保存在变量 p 中
var p = d3.select("body")
.selectAll("p")
.text("www.ourd3js.com");
//修改段落的颜色和字体大小
p.style("color","red").style("font-size","72px");

  上面的代码是先将选中的元素赋值给变量 p,然后通过变量 p 来改变样式,这样可以使代码更整洁。

  这里涉及一个概念:选择集。使用 d3.select() 或 d3.selectAll() 选择元素后返回的对象,就是选择集。

  另外,有人会发现,D3 能够连续不断地调用函数,形如:d3.select().selectAll().text();这称为链式语法,和 JQuery 的语法很像,常用 JQuery 的朋友一定会感到很亲切。

三、如何选择元素

  在 D3 中,用于选择元素的函数有两个:

  (1)d3.select():是选择所有指定元素的第一个

  (2)d3.selectAll():是选择指定元素的全部

  这两个函数返回的结果称为选择集。例如,选择集的常见用法如下:

var body = d3.select("body"); //选择文档中的body元素
var p1 = body.select("p"); //选择body中的第一个p元素
var p = body.selectAll("p"); //选择body中的所有p元素
var svg = body.select("svg"); //选择body中的svg元素
var rects = svg.selectAll("rect"); //选择svg中所有的svg元素

  选择集和绑定数据通常是一起使用的。

四、如何绑定数据

  D3 有一个很独特的功能:能将数据绑定到 DOM 上,也就是绑定到文档上。这么说可能不好理解,例如:网页中有段落元素 <p> 和一个整数 5,于是可以将整数 5 与 <p>绑定到一起。绑定之后,当需要依靠这个数据才操作元素的时候,会很方便。

  D3 中是通过以下两个函数来绑定数据的:

  (1)datum():绑定一个数据到选择集上

  (2)data():绑定一个数组到选择集上,数组的各项值分别与选择集的各元素绑定

  相对而言,data() 比较常用。

  假设现在有三个段落元素如下。

<p>Apple</p>
<p>Pear</p>
<p>Banana</p>

  接下来分别使用 datum() 和 data(),将数据绑定到上面三个段落元素上。

1、datum()

  假设有一字符串 China,要将此字符串分别与三个段落元素绑定,代码如下:

var str = "China";

var body = d3.select("body");
var p = body.selectAll("p"); p.datum(str); p.text(function(d, i){
return "第 "+ i + " 个元素绑定的数据是 " + d;
});

  绑定数据后,使用此数据来修改三个段落元素的内容,其结果如下:

第  个元素绑定的数据是 China
第 个元素绑定的数据是 China
第 个元素绑定的数据是 China

  在上面的代码中,用到了一个无名函数 function(d, i)。当选择集需要使用被绑定的数据时,常需要这么使用。其包含两个参数,其中:

  (1)d 代表数据,也就是与某元素绑定的数据。

  (2) i 代表索引,代表数据的索引号,从 0 开始。

  例如,上述例子中:第 0 个元素 apple 绑定的数据是 China。

2、data()

  有一个数组,接下来要分别将数组的各元素绑定到三个段落元素上。

var dataset = ["I like dogs","I like cats","I like snakes"];

  调用 data() 绑定数据,并替换三个段落元素的字符串为被绑定的字符串,代码如下:

var body = d3.select("body");
var p = body.selectAll("p"); p.data(dataset)
.text(function(d, i){
return d;
});

  这段代码也用到了一个无名函数 function(d, i),其对应的情况如下:

  当 i == 0 时, d 为 I like dogs。

  当 i == 1 时, d 为 I like cats。

  当 i == 2 时, d 为 I like snakes。

  此时,三个段落元素与数组 dataset 的三个字符串是一一对应的,因此,在函数 function(d, i) 直接 return d 即可。结果自然是三个段落的文字分别变成了数组的三个字符串。

D3.js系列——初步使用、选择元素与绑定数据的更多相关文章

  1. D3.js 选择元素和绑定数据/使用数据

    选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...

  2. D3.js的v5版本入门教程(第三章)—— 选择元素和绑定数据

    D3.js的v5版本入门教程(第三章) 在D3.js中,选择元素和绑定元素是最基本的内容,也是很重要的内容,等你看完整个教程后你会发现,这些D3.js教程都是在选择元素和绑定元素的基础上展开后续工作的 ...

  3. on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

    on(events,[selector],[data],fn) 概述 在选择元素上绑定一个或多个事件的事件处理函数.大理石平台精度等级 on()方法绑定事件处理程序到当前选定的jQuery对象中的元素 ...

  4. D3.js系列——元素操作和简单画布操作

    一.元素操作: 1.选择元素 select 和 selectAll,以及选择集的概念 var p = d3.select("body").select("p") ...

  5. D3.js学习笔记(三)——创建基于数据的SVG元素

    目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始, ...

  6. D3.js系列——动态效果和Update、Enter、Exit的理解

    一.动态效果 D3 支持制作动态的图表.有时候,图表的变化需要缓慢的发生,以便于让用户看清楚变化的过程,也能给用户不小的友好感. 1.什么是动态效果 前面制作的图表是一蹴而就地出现,然后绘制完成后不再 ...

  7. D3.js系列——交互式操作和布局

    一.图表交互操作 与图表的交互,指在图形元素上设置一个或多个监听器,当事件发生时,做出相应的反应. 交互,指的是用户输入了某种指令,程序接受到指令之后必须做出某种响应.对可视化图表来说,交互能使图表更 ...

  8. D3.js系列——布局:弦图和集群图/树状图

    一.弦图 1.弦图是什么 弦图(Chord),主要用于表示两个节点之间的联系的图表.两点之间的连线,表示谁和谁具有联系. 2.数据 初始数据为: var city_name = [ "北京& ...

  9. 文章预告的自我挖坑系列——D3.js 系列之星光闪烁

    D3.js 是个神奇的工具,下面收集了一些与星星相关的可视化的例子,静待慢慢的把坑填上 雷达图http://bl.ocks.org/kevinschaul/8213691      星空 二维(一)h ...

随机推荐

  1. return 与 exit() 的区别

    return是一个关键字,返回函数值:exit()是一个函数: return是语言级的:exit()是操作系统提供的函数: return表示函数退出:exit()表示进程退出: 非主函数中调用retu ...

  2. /usr/bin/expect介绍

    /usr/bin/expect介绍 http://blog.csdn.net/zhu_tianwei/article/details/44180637 概述 我们通过Shell可以实现简单的控制流功能 ...

  3. react+webpack+babel+eslint+redux+react-router+sass 环境快速搭建

    本文中的例子支持webpack-dev-server自动刷新及react热替换,使用了redux管理state,用react-router切换路由,用babel实现ES6语法书写,同时支持async/ ...

  4. 电脑IP总是变的问题

    如题,如何解决该问题? 右键---->个性化---->更改桌面图标---->添加网络图标 右键网络图标----->属性---->更改适配器设置---->右键属性,找 ...

  5. eclipse启动几秒后报错 (一闪而过)

    eclipse启动报错,让查看.metadata/.log日志   1 !SESSION 2013-09-23 17:28:28.484 ------------------------------- ...

  6. tushrea知识笔记

    生成时间序列: dates = pandas.date_range('2013-01-01',periods = 6) Pandas读取excel数据: df=pd.read_excel(" ...

  7. Mysql缺少可执行的命令

    MySQL问题解决:-bash:mysql:command not found 问题:       [root@linux115 /]# mysql -uroot -p        -bash: m ...

  8. MySQL阅读笔记

    左连接:包含所有的左边表中的记录甚至是右边表中没有和它匹配的记录.右连接:包含所有的右边表中的记录甚至是左边表中没有和它匹配的记录. select ename,deptname from emp le ...

  9. AVR单片机中的EEPROM

    1.EEPROM介绍 Electrically Erasable Programmable Read Only Memory 电气可拭除可编程只读存储器 发展过程:ROM – > PROM –& ...

  10. 漫谈网络通信——从OSI网络模型到TCP/IP协议族

    OSI七层模型 OSI(Open System Interconnection,开放系统互联)七层网络模型成为开放式系统互联参考模型,是一个把网络通信在逻辑上的定义,也可以理解成为定义了通用的网络通信 ...