1. 如何绑定数据

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

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> 里的所有 <p> 元素，并将选择集赋值给一个变量 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 是选择所指定的所有的元素。

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

有两个办法：

（1）为第三个 <p> 赋予一个 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 】 绑定数据和选择元素的更多相关文章

  1. 【 D3.js 入门系列 — 11 】 入门总结

    D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...

  2. 【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用

    在前面几节中反复出现了如下代码: svg.selectAll("rect") .data(dataset) .enter() .append("rect") 当 ...

  3. 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素

    接着上一讲的内容,这次讨论如何选择元素和使用数据.    现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...

  4. 【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素

    本人的个人博客首页为: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 接着上一讲的内容,这 ...

  5. 【 D3.js 入门系列 --- 3 】 做一个简单的图表！

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  6. 【 D3.js 入门系列 — 3 】 做一个简单的图表！

    图1. 柱形图 1. 柱形图 前几章的例子,都是对文字进行处理.本章中将用 D3 做一个简单的柱形图.制作柱形图有很多种方法,比如用 HTML 的 <div> 标签,或在 SVG 上绘制 ...

  7. 【 D3.js 入门系列 --- 0 】 简介和安装

    D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...

  8. 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld

    记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...

  9. 【 D3.js 入门系列 --- 0 】 简介及安装

    家是我的个人博客: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/.转载请注明出处,谢谢. D3的全称是(Data-D ...

随机推荐

  1. [LeetCode]题解（python）：134-Gas Station

    题目来源: https://leetcode.com/problems/gas-station/ 题意分析: 在一个圈子路线里面有N个汽油站,i站的汽油有gas[i]汽油.现在有一辆无限容量的车,它从 ...

  2. linux和windows的文件互传

    Linux →→→Windows 1.使用secureCRT:下载文件只需在shell终端仿真器中输入命令"sz 文件名",即可利用Zmodem将文件下载到本地某目录下. 2. s ...

  3. MVC模式已死

    MVC模式:Model模型 View试图 Control控制器,是目前主流模式,被当作服务器软件入门基本模式学习和掌握,主流框架Struts 1/2 JSF Wicket基本都顺理成章支持MVC模式. ...

  4. linux-0.11抠代码-GDB+VMWARE

    vmware新建一个虚拟机,硬盘为0.1G,建立完成后要先启动一次虚拟机,此时无任何系统,然后再关闭,应该会多出一个ostest-flat.vmdk这个虚拟磁盘文件,下面要用到 新建完成后 我的虚拟机 ...

  5. SPOJ1811最长公共子串问题(后缀自动机)

    题目:http://www.spoj.com/problems/LCS/ 题意:给两个串A和B,求这两个串的最长公共子串. 分析:其实本题用后缀数组的DC3已经能很好的解决,这里我们来说说利用后缀自动 ...

  6. 在js中获取query string 以及重写URL的函数

    函数用途:如标题.1. 从URL中解析出參数,2.重写URL中的參数值 例如以下代码所看到的.包括了測试.能够直接copy到浏览器中,输入測试地址:localhost:xxx?a=1&b=2& ...

  7. POJ 2695 The Pilots Brothers' refrigerator(神奇的规律)

    转载请注明出处:http://blog.csdn.net/a1dark 分析:如果想要将一个“+”翻转成“-”,那么必然会把对应的行和列上的所有点翻转一次.由于一个点翻偶数次就相当于不翻转.所以我需要 ...

  8. Android Material Design-Creating Apps with Material Design(用 Material Design设计App)-(零)

    转载请注明出处:http://blog.csdn.net/bbld_/article/details/40400031 翻译自:http://developer.android.com/trainin ...

  9. PHP - 数组去重，（折中：符串去重）

    [译]更快的方式实现PHP数组去重 Jan 11, 2016 • Hector 原文:Faster Alternative to PHP’s Array Unique Function 概述 使用PH ...

  10. springdata+redis配置详解

    springdata设计初衷是位简化数据类型和数据的持久化存储,它并不局限是关系型数据库还是nosql数据库,都提供了简化的数据库连接,让数据获取变得更加的简单.所有这些的实现有统一的api提供. 本 ...