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. awk的用法（转）

    awk 用法:awk ' pattern {action} ' 变量名 含义 ARGC 命令行变元个数 ARGV 命令行变元数组 FILENAME 当前输入文件名 FNR 当前文件中的记录号 FS 输 ...

  2. mabatis mapper开发规范

    定义一个mapper接口 package mapper; import pojo.User; public interface UserMapper { public User getUser(int ...

  3. Myeclipse安装Activiti

    1.将压缩包内activiti文件夹放入Myeclipse\dropins文件夹内并修改activiti文件夹内Link文件指向自己的目录重启Myeclipse(这时打开bpmn文件仍会报错).2.将 ...

  4. 未能加载文件或程序集“xxxx”或它的某一个依赖项

    一般是解决方案中相互依赖的项目生成的目标平台不一样所致,更改为相同目标即可!

  5. 英文论文中“such as, for example, e.g., i.e., etc., et al. ”的用法分析 (转)

    在英文论文的编辑加工中,常会遇到such as, for example, e. g. , i. e. , etc. 和et al. 的错误及混淆使用.这里,举例分析这几个词的意义,并阐述其正确用法. ...

  6. 阿里云ECS每天一件事D1：配置SSH

    近期因为项目需求,采购了两台阿里云ECS,选择的系统为CentOS 6.3 X64 安全加固版,额外买了160G的硬盘,应该够应付此项目的需求了. ECS默认已经配置好了sshd服务,可以使用root ...

  7. Apache 错误代码配置

    ErrorDocument 400 /error_pages/400.htmlErrorDocument 401 /error_pages/401.htmlErrorDocument 403 /err ...

  8. js中赋值表达式的值为右边

    var name="the window";var o={ name:"the object", getName:function(){ console.log ...

  9. C# Best Practices - Handling Strings

    Features Strings Are Immutable. A String Is a Reference Type Value Type Store their data directly Ex ...

  10. Objects

    Obeject Object Object representation and value representation Subobjects Polyomrphic objecets Alignm ...