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. set up blog on github

    http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html

  2. [LeetCode]题解（python）：135-Candy

    题目来源: https://leetcode.com/problems/candy/ 题意分析: 有N个孩子站成一条线.每个孩子有个排名.要求1.每个孩子至少一个糖果,2.相邻的孩子,那么较高排名的孩 ...

  3. 读取IOS的相应路径

    //    IOS相应路径 NSString* bundlePath = [[NSBundle mainBundle] bundlePath]; NSLog(@"bundlePath = % ...

  4. 前端笔试题 JS部分

    题目 http://www.itmian4.com/forum.php?mod=viewthread&tid=4540 http://www.itmian4.com/forum.php?mod ...

  5. RFID电子标签的二次注塑封装

    生活当中,RFID电子标签具有明显的优势,随着RFID电子标签成本的降低.读写距离的提高.标签存储容量增大及处理时间缩短的发展趋势,R F I D电子标签的应用将会越来越广泛. RFID电子标签的应用 ...

  6. javadoc入门

    斌斌 (给我写信) 原创博文(http://blog.csdn.net/binbinxyz),转载请注明出处! java凝视 java里面有两种类型的凝视.一种是以"/*"起头,以 ...

  7. 快速构建ASP.NET MVC Admin主页

    前言 后台开发人员一般不喜欢调样式,搞半天样式出不来,还要考虑各种浏览器兼容,费心费力不讨好,还好互联网时代有大量的资源共享,避免我们从零开始,现在就来看怎么快速构建一个ASP.NET MVC后台管理 ...

  8. iOS开发中遇到的bug

    报错:The operation couldn’t be completed. (LaunchServicesError error 0.) 解决办法:重置模拟器

  9. char*与char[]

    char *s1="hello";   // 指向常量区 char s2[]="hello";   // 指向数组的内存空间 char *s1 的s1是指针,指 ...

  10. C++创建对象的三种方式

    C++在创建对象的时候,有三种方式: #include <iostream> using namespace std; class A { private: int n; public: ...