1. 如何绑定数据

D3 有一个很独特的功能：能将数据绑定到 DOM 上，也就是绑定到文档上。这么说可能不好理解，例如网页中有段落元素，我们可以将整数 5 与 绑定到一起。

D3 中是通过 data() 和 datum() 函数来绑定数据的，最常用的是 data()。

现有如下 HTML 代码：

<p>Hello World 1</p>
<p>Hello World 2</p>
<p>Hello World 3</p>

然后，有如下数据：

var set = ["I like dog","I like cat","I like snake"];

这是一个数组，有三项。现在要将这三项分别绑定到三个段落元素上，即：

Hello World 1 与 I like dog 绑定
Hello World 2 与 I like cat 绑定

Hello World 3 与 I like snake 绑定

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

var sp = d3.select("body").selectAll("p");   //选择元素
sp.data(set)             //绑定数据
  .text(function(d,i){
      return d;
  });

这段代码中，

第 1 行：选择 <body> 里的所有 元素，并将选择集赋值给一个变量 sp。

第 2 行：使用函数 data() 绑定数组 set。

第 3 – 5 行：更改段落元素的内容。后面有一个无名函数 funciont(d,i)，这里的两个参数：第一个参数的意思是 datum（数据），第二个参数的意思是 index（索引）。

在 function(d, i) 里，情况如下：

当 i == 0 时， d 为 I like dog。
当 i == 1 时， d 为 I like cat。

当 i == 2 时， d 为 I like snake。

此时，三个段落元素与数组 set 的三个字符串是一一对应的，因此，在函数 function(d, i) 里添加一句代码 return d; 即可。

结果如下图：

如果不绑定数组 set ，想要将所有段落都变为相同的字符串（如都变成 China），只需：

sp.text("China");

即可。

2. 如何选择元素

在【入门 – 第 1 章】和上文中，已经尝试过选择 HTML 元素了。在 D3 中，主要是用 select() 和 selectAll() 两个函数。

使用方式为：d3.select(“p”) 和 d3.selectAll(“p”)

select() 默认选择文档中所指定的第一个元素，selectAll 是选择所指定的所有的元素。

这里就有一个问题：如何选择非第一个元素呢？假设我们只想选择第三个 元素 Hello World 3 ，怎么办呢？

有两个办法：

（1）为第三个 赋予一个 id，即

<p id="p3">Hello World 3</p>

再选择

var sp = d3.select("#p3");   //选择元素

再进行操作即可。

（2）如果绑定了数据，则可在 function(d,i) 里操作，例如

sp.text(function(d,i){
        if(i==2){
     ....
    }
       //如果不指定 i == 0 和 i == 1 的操作的话，会自动返回空值
});

但是要注意，用这种方法，必须要指定当 i 不等于 2 时的操作，否则会返回空值，即第 1 个段落和第 2 个段落变为空。

【 D3.js 入门系列 — 2 】绑定数据和选择元素的更多相关文章

【 D3.js 入门系列 — 11 】入门总结
D3 新专题首页一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...
【 D3.js 入门系列 --- 7 】理解 update, enter, exit 的使用
在前面几节中反复出现了如下代码: svg.selectAll("rect") .data(dataset) .enter() .append("rect") 当 ...
【 D3.js 入门系列 --- 2 】如何使用数据和选择元素
接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: Hello World 1 Hello World 2 ...
【 D3.js 入门系列 --- 2 】怎样使用数据和选择元素
本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 接着上一讲的内容,这 ...
【 D3.js 入门系列 --- 3 】做一个简单的图表！
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...
【 D3.js 入门系列 — 3 】做一个简单的图表！
图1. 柱形图 1. 柱形图前几章的例子,都是对文字进行处理.本章中将用 D3 做一个简单的柱形图.制作柱形图有很多种方法,比如用 HTML 的 <div> 标签,或在 SVG 上绘制 ...
【 D3.js 入门系列 --- 0 】简介和安装
D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...
【 D3.js 入门系列 — 1 】第一个程序 HelloWorld
记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...
【 D3.js 入门系列 --- 0 】简介及安装
家是我的个人博客: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/.转载请注明出处,谢谢. D3的全称是(Data-D ...

随机推荐

PHP的一些函数
//进制转换类 base_convert //字符转十六进制 binhex
php学习笔记（2）
1.算数运算 <?php $a = 8; $b = 2; $c = 3; echo $a+$b." \n"; echo $a-$b."<br ...
bzoj 1057: [ZJOI2007]棋盘制作单调栈
题目链接 1057: [ZJOI2007]棋盘制作 Time Limit: 20 Sec Memory Limit: 162 MBSubmit: 2027 Solved: 1019[Submit] ...
Git使用记录（二）
一)git init 初始化仓库要使用Git进行版本管理,必须先初始化仓库,请先建立一个目录并初始化仓库 mkdir gittest cd gittest git init 初始化成功以后会在当前目 ...
VARCHAR2(N CHAR)与VARCHAR2(N)的区别[Oracle基础]
转载: http://blog.itpub.net/24930246/viewspace-1064982 在数据库开发的时候,经常需要考虑存储空间的问题,当然很多时候我们并不需要去考虑一些细小的差别, ...
protel99_拼板详细图解
首先打开PCB文档.如图所示,在PCB左下角放置一個坐標為X＝0,Y＝0的焊盤. 从下图看,为了方便电路板生产厂家的加工和焊接工厂的加工,拼版的方向是向上Y轴方向拼版. 接着为了在拼版过程中好对齐板边 ...
Nginx工作原理和优化、漏洞（转）
查看安装了哪些模块命令: [root@RG-PowerCache-X xcache]# nginx/sbin/nginx -Vnginx version: nginx/1.2.3built by gc ...
C++模板：Dijkstra+优先队列
#include <cstdio> #include <cstring> #include <queue> #include <utility> usi ...
HDU 2104 hide handkerchief
题解:由题目可以知道,如果n和m的最大公约数不为1,那么总有箱子是无法遍历的,所以求一遍GCD就可以判断了. 注意点:一定要记住判断是==,在做题时又忘了. #include <cstdio&g ...
java学习之即时通信项目实战
项目总结:这次项目主要是根据视频来的,结果跟到一半感觉跟不上,慢慢自己有了自己的想法,决定自己先不看学习视频,自己先试着写. 总结写前面,算是写的第一个项目吧.项目中遇到几点问题,首先Scoket对 ...

【 D3.js 入门系列 — 2 】 绑定数据和选择元素

1. 如何绑定数据

2. 如何选择元素

【 D3.js 入门系列 — 2 】 绑定数据和选择元素的更多相关文章

随机推荐

热门专题

【 D3.js 入门系列 — 2 】绑定数据和选择元素

【 D3.js 入门系列 — 2 】绑定数据和选择元素的更多相关文章