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. springmvc附件上传核心代码

    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.Comm ...

  2. fiddler---使用方法1--抓取手机app包

    1.首先fiddler设置

  3. java中文乱码问题

    •ASCII ØASCII使用7个比特(bit)进行字符编码,最多可以表示的字符数量为27(128)个字符,这些字符包括了大小写英文字母.阿拉伯数字.标点符号.控制字符和其他符号.每个字符用一个字节表 ...

  4. 射频识别技术漫谈(9)——动物标签HDX

    半双工(HDX,Half Duplex)技术是ISO11784/11785中规定的另一种标签与读写器之间的通讯方式.读写器先打开射频场对标签充电以激活标签,然后关闭磁场,标签在读写器磁场关闭的情况下向 ...

  5. USB VID PID 查询

    USB VID PID 查询:http://www.linux-usb.org/usb.ids 说明: USB设备中有VID何PID,分别表示此USB设备是哪个厂商的哪种设备. 一个USB的VID对应 ...

  6. HDU 3802 Ipad,IPhone

    http://wutyyzchangde.blog.163.com/blog/static/172226566201132311311374/ #include <cstdio> type ...

  7. linux使用技巧(shell/vi/screen)

    1,Shell bash > awk '{print {NF}}' file 此时想修改操作命令可参照下面快捷方式 ctrl a 光标移动到命令最前面 ctrl e 光标移动到命令最后面 ctr ...

  8. lightoj Again Array Queries

    1100 - Again Array Queries   PDF (English) Statistics Forum Time Limit: 3 second(s) Memory Limit: 32 ...

  9. 【翻译】探究Ext JS 5和Sencha Touch的布局系统

    原文:Exploring the Layout System in Ext JS 5 and Sencha Touch 布局系统是Sencha框架中最强大和最有特色的一个部分. 布局要处理应用程序中每 ...

  10. golang语法学习(一)：变量,常量以及数据类型

    学习一门新的语言肯定是要从他的主要的语法開始,语法构成了整个程序设计的基础,从语法中我们也能够看到这门语言的一些特性.可是话说回来.语法这东西,不同的语言大同小异,所以这也对语法的记忆造成了一定的难度 ...